循环关键帧css3动画8次

Question

是否可能（即使有 jQuery 的帮助，如有必要 -- 循环 CSS3 关键帧动画 8 次）

.coin{  
  animation: animationFrames ease 1.5s;
  -webkit-animation: animationFrames ease 1.5s; /* Safari 4+ */
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  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;
}

/* Chrome, Safari, Opera */ 

@-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)  ;
  }
  19% {
    -webkit-transform:  translate(-122px,0px)  ;
  }
  19% {
    -webkit-transform:  translate(-122px,44px)  ;
  }
  19% {
    -webkit-transform:  translate(-122px,44px)  ;
  }
  24% {
    -webkit-transform:  translate(-98px,59px)  ;
  }
  29% {
    -webkit-transform:  translate(-91px,128px)  ;
  }
  29% {
    -webkit-transform:  translate(-91px,128px)  ;
  }
  34% {
    -webkit-transform:  translate(-59px,77px)  ;
  }
  38% {
    -webkit-transform:  translate(-13px,34px)  ;
  }
  42% {
    -webkit-transform:  translate(51px,13px)  ;
  }
  46% {
    -webkit-transform:  translate(101px,39px)  ;
  }
  51% {
    -webkit-transform:  translate(141px,72px)  ;
  }
  56% {
    -webkit-transform:  translate(163px,105px)  ;
  }
  62% {
    -webkit-transform:  translate(177px,155px)  ;
  }
  68% {
    -webkit-transform:  translate(177px,155px)  ;
  }
  100% {
    -webkit-transform:  translate(177px,155px)  ;
  }
}

Answer 1

只需将 animation-iteration-count: 从 infinite 更改为 8

循环关键帧css3动画8次

loop key frame css3 animation 8 times

jquery

css

css-animations