css - 悬停时的关键帧动画 : Skipping initial regular state animation

Question

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

我有一个可以正常运行过渡的基本版本，但我想在缩放中添加一点弹跳，所以我创建了关键帧动画的进出。

当我将这两个动画应用于常规和悬停状态时，一切都按预期进行。但是，我想在初始加载时跳过常规状态动画，这样您就不会看到叠加层在加载时退出。没有 JavaScript 有什么方法可以做到这一点吗？

这是一个代码笔: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

最好的选择可能是继续使用过渡。您可以让它们变得非常复杂。

这是我尝试使用它们而不是关键帧来获得效果的尝试。我正在使用 cubic bezier 来获得 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，您可以实时编辑贝塞尔曲线