Question

我终于让这个动画与我的设计师提出的原型相匹配，除了一件事，悬停状态在动画播放之前闪烁。查看我的CodePen：http://codepen.io/sinrise/pen/rxvjyx/

<style type="text/css">
@keyframes bounceInUp {
  from, 60%, 75%, to {
    -webkit-animation-timing-function: cubic-bezier(0.8, 0.6, 0.5, 1.000);
    animation-timing-function: cubic-bezier(0.8, 0.6, 0.5, 1.000);
  }

  from {
    -webkit-transform: translate3d(0, 390px, 0);
    transform: translate3d(0, 390px, 0);
  }

  60% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 1px, 0);
    transform: translate3d(0, 1px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.small-hero {
    position: relative;
    width: 100%;
    max-height: 385px;
    min-height: 385px;
    overflow-y: hidden;
    margin-bottom: 15px;
}
.small-hero::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.6));
    content: "";
}
.small-hero h3, .small-hero p, .small-hero a {
    position: absolute;
    top: 0;
    margin: 0 auto;
    color: #fff;
    z-index: 1;
    text-align: center;
}
.small-hero img { width: 100%; }
.small-hero .small-hero-hover-bg {
    position: absolute;
    top: 390px;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba($tmi-orange, 0.8);
    z-index: 2;
}
.small-hero .small-hero-hover-h3, .small-hero .small-hero-hover-p, .small-hero .small-hero-hover-a {
    position: absolute;
    top: 390px;
    z-index: 2;
    left: 0;
    right: 0;
    max-width: 500px;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}
.small-hero .small-hero-hover-a { max-width: 200px; }
.small-hero .small-hero-hover-p { font-size: 18px; }
.small-hero:hover .small-hero-hover-bg {
    top: 0;
    transition: top 0.4s, opacity 0.4s;
}
.small-hero:hover .small-hero-hover-h3, .small-hero:hover .small-hero-hover-p, .small-hero:hover .small-hero-hover-a {
    animation: bounceInUp 0.5s 1;
}
.small-hero:hover .small-hero-hover-h3 {
    top: 100px;
}
.small-hero:hover .small-hero-hover-p {
    top: 150px;
    animation-delay: 0.05s;
}
.small-hero:hover .small-hero-hover-a {
    top: 250px;
    animation-delay: 0.1s;
}
</style>
<div class="small-hero">
  <img src="http://placehold.it/500x350" />
  <div class="small-hero-hover-bg"></div>
  <h3>Title</h3>
  <h3 class="small-hero-hover-h3">Title</h3>
  <p class="small-hero-hover-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elit nec nisl imperdiet efficitur. Ut ut mauris non sapien elementum tempor.</p>
  <a href="#" class="small-hero-hover-a btn btn-action">Get a Quote</a>
</div>

Answer 1

http://codepen.io/anon/pen/rxvjQW

已修复opacity:0;

上的.small-hero h3, .small-hero p, .small-hero a 悬停上的

和animation: bounceInUp 0.5s 1 forwards;。

forwards使您的元素保持在动画的最后一帧。 opacity:0;使它开始，好吧，0不透明。

{p> Here animation-fill-mode上有一些文档。

CSS动画。悬停状态在动画前闪烁

1 个答案: