Question

我希望以下内容开始动画，大约延迟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)  ;
      }

Answer 1

尝试

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

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

CSS3关键帧动画，2-3秒START延迟（不迭代）

1 个答案: