具有 2-3 秒 START 延迟的 CSS3 关键帧动画（不迭代）[重复]答案

【问题标题】：CSS3 keyframe animation with 2-3 sec START delay (not iterate) [duplicate]具有 2-3 秒 START 延迟的 CSS3 关键帧动画（不迭代）[重复]
【发布时间】：2015-04-22 04:51:16
【问题描述】：

我希望下面的动画在大约 2-3 秒延迟后开始。

任何人都知道如何为 CSS3 关键帧动画的开始添加延迟，如下所示？ （不推荐使用 jQuery，但如果必须的话）

.coin{  
  animation: animationFrames ease 2.5s;
  -webkit-animation: animationFrames ease 2.5s; /* Safari 4+ */
  animation-iteration-count: 8;
  -webkit-animation-iteration-count: 8;
  transform-origin: 50% 50%;
  -webkit-transform-origin:  50% 50%;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode: forwards;
  max-width: 55px;
  position:relative;
  top: 63px;
  left: 195px;
}

和：

  @-webkit-keyframes animationFrames {
      0% {
        -webkit-transform:  translate(-402px,55px)  ;
      }
      4% {
        -webkit-transform:  translate(-333px,26px)  ;
      }
      9% {
        -webkit-transform:  translate(-257px,-13px)  ;
      }
      14% {
        -webkit-transform:  translate(-183px,-18px)  ;
      }

【问题讨论】：

是的，我假设是 .coin。另外，请参阅我对包括“过渡延迟”的更新答案
查看我的更新以改用“animate-delay”
我使用 jQuery 来得到我的结果。

标签： jquery css animation css-animations

【解决方案1】：

试试

-webkit-animation-delay: 2s;
animation-delay: 2s;

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay

【讨论】：

我更新了我的问题——我会把它放在哪里？在 .coin 上？
我看不出有什么不同...我在 .coin 上添加了它
@Nooneknows 是的，您将其添加到 .coin
但是发生的事情是...... .coin 开始时没有延迟，但会延迟迭代
@Nooneknows，你删除了'animation-iteration-count: 8;'防止迭代？