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

【问题标题】：Keyframes animation on hover: Skipping initial regular state animation悬停时的关键帧动画：跳过初始常规状态动画
【发布时间】：2015-10-09 17:15:15
【问题描述】：

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

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

当我将这两个动画应用于常规和悬停状态时，一切都按预期工作。但是，我想在初始加载时跳过常规状态动画，这样您就看不到加载时退出的覆盖。没有 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;
  }
}

【问题讨论】：

标签： css animation hover keyframe

【解决方案1】：

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

这是我尝试使用它们而不是关键帧来获得您的效果。我正在使用三次贝塞尔曲线来获得 scale() 上的反弹效果

.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);
}

<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>

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

【讨论】：