悬停时的关键帧动画：跳过初始常规状态动画

Question

我有一个叠加效果，我试图实现在悬停时图像顶部覆盖文本块的位置。

我有一个基本版本，过渡工作，但我想为缩放添加一点反弹，所以我创建了进出关键帧动画。

当我将两个动画应用于常规和悬停状态时，一切都按预期工作。但是，我想在初始加载时跳过常规状态动画，因此您不会看到加载时出现的叠加层。没有JavaScript，有没有办法做到这一点？

这是一个Codepen：http://codepen.io/anon/pen/mJjNrg

HTML

<div class="box">
  <div class="content">
    <img src="http://lorempixel.com/output/business-q-c-640-480-6.jpg" alt="" />
    <div class="overlay">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet rerum in illum earum a, possimus, eum aliquam quia. Inventore, repudiandae fuga. Ducimus porro illo eum.</div>
  </div>
  <div class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, dicta.
  </div>
</div>

CSS

.box{
  width: 300px;
  margin: 100px auto;
}

img{
  max-width: 100%;
  height: auto;
  display: block;
}

.content{
  position: relative;
  overflow: hidden;
}

.caption{
  padding: 10px;
  background: #f3f3f3;
}

.overlay{
  background: rgba(255,255,255, .7);
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  padding: 10px;
  transform: translateY(120%) scale(0);
  animation: fadeScaleBounceOut 1s;
}

.box:hover .overlay{
  transform: translateY(0%) scale(1);
  animation: fadeScaleBounceIn 1s;
}

@keyframes fadeScaleBounceIn{
  0%{
    transform: translateY(120%) scale(0);
    opacity: 0;
  }
  80%{
    transform: translateY(0%) scale(1.1);
    opacity: 1;
  }
  100%{
    transform: translateY(0%) scale(1);
    opacity: 1;
  }
}

@keyframes fadeScaleBounceOut{
  0%{
    transform: translateY(0%) scale(1);
    opacity: 1;
  }
  20%{
    transform: translateY(0%) scale(1.1);  
    opacity: 1;
  }
  100%{
    transform: translateY(120%) scale(0);
    opacity: 0;
  }
}

Answer 1

可能你最好的选择就是坚持过渡。你可以让它们变得非常复杂。

这是我尝试使用它们而不是关键帧来实现效果。我使用立方贝塞尔曲线来获得对音阶（）的反弹效果

＆＃13;

＆＃13;

.box{
  width: 300px;
  margin: 100px auto;
}

img{
  max-width: 100%;
  height: auto;
  display: block;
}

.content{
  position: relative;
  overflow: hidden;
}

.caption{
  padding: 10px;
  background: #f3f3f3;
}

.overlay{
  background: rgba(255,255,255, .7);
  position: absolute;
  left: 20px;
  right: 20px;
  padding: 10px;
  height: calc( 100% - 60px );
  top: 120%;
  opacity: 0;
  transform: scale(0);
  transition-property: top, opacity, transform;
  transition-duration: 0.8s, 0.8s, 1s;
  transition-timing-function: ease-in-out, ease-in-out, cubic-bezier(0.42, 0, 0.43, 1.5);
}

.box:hover .overlay{
  top: 20px;
  opacity: 1;
  transform: scale(1);
}

＆＃13;

<div class="box">
  <div class="content">
    <img src="http://lorempixel.com/output/business-q-c-640-480-6.jpg" alt="" />
    <div class="overlay">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet rerum in illum earum a, possimus, eum aliquam quia. Inventore, repudiandae fuga. Ducimus porro illo eum.</div>
  </div>
  <div class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, dicta.
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

顺便说一句，如果您使用的是Chrome，则可以直接编辑贝塞尔曲线