如何让CSS动画每10秒播放一次

时间:2013-05-28 03:46:36

标签: css css3 loops css-transitions css-animations

我有一个css动画,无论是重复无限还是只重复一次。但我想每5秒钟播放2次。 这是我的代码:

    #countText{
    -webkit-animation-name: color2;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 2;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 5s;
}
@-webkit-keyframes color2 {
        0% { }
        25% { text-shadow:-2px -5px 10px #fb0017, -5px 0px 10px #3a00cd, -5px 5px 10px #00ff3a}
        50% { }
        75% { text-shadow:2px 5px 10px #fb0017, 5px 0px 10px #3a00cd, 5px -5px 10px #00ff3a; }
        100% {}
}

2 个答案:

答案 0 :(得分:16)

您可以更改关键帧以显示动画两次。首先从0%20%,然后从20%40%,然后让它保持这样直到100%。现在将animation-duration更改为5s,而不是animation-delay

  #countText {
      -webkit-animation-name: color2;
      -webkit-animation-duration: 5s;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
      -webkit-animation-delay: 0s;
  }
  @-webkit-keyframes color2 {
      0% {
      }
      5%,25% {
          text-shadow: -2px -5px 10px #fb0017,
                       -5px 0px 10px #3a00cd,
                       -5px 5px 10px #00ff3a;
      }
      15%,35% {
          text-shadow: 2px 5px 10px #fb0017,
                       5px 0px 10px #3a00cd,
                       5px -5px 10px #00ff3a;
      }
      40% {
        text-shadow: none;
    }
}

Demo

答案 1 :(得分:0)

.shk_this {
  transform: translate3d(0, 0, 0);
  animation-name: shakeMe;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes shakeMe {
  2%, 18% {
      transform: translate3d(-5px, 0, 0);
  }

  4%, 16% {
      transform: translate3d(5px, 0, 0);
  }

  6%, 10%, 14% {
      transform: translate3d(-5px, 0, 0);
  }

  8%, 12% {
      transform: translate3d(5px, 0, 0);
  }
  
  18.1% {
      transform: translate3d(0px, 0, 0);
  }
}
<div class="shk_this">Shake This</div>