0

我有一个简单的关键帧动画：

animation: blink-truck-lights .4s 8s 10s steps(2) 2 forwards ;
@keyframes blink-truck-lights{
 from{background-position: 0px 0;}

 to{background-position: 0px -250px;}
}

这是JS部分：

   setInterval(function(){
 $('#truck').addClass('blink-truck-lights');       

 },500);
  setInterval(function(){
 $('#truck').removeClass('blink-truck-lights');       

 },800);

现在，我需要它在指定的时间间隔内播放，大约 8 秒。我想到了如何做到这一点，也许通过使用动画语法添加和删除类。但是我尝试了 setInterval，它添加了类，但是当我创建另一个用于删除类的间隔时，动画就无法启动。

4

2 回答 2

0

这是执行此操作的一种方式，除了 animationEnd 或 animationStart 事件。只需在所需元素上切换类，然后设置您希望动画重新开始的 intreval。

setInterval(function(){$('#truck').toggleClass('blink-truck-lights')},10000);

现在，卡车灯将每 10 秒闪烁一次。

于 2013-07-26T17:04:23.193 回答
0

你也可以用纯CSS来做..

#id {
  -webkit-animation: NAME-YOUR-ANIMATION 8s infinite; /* Safari 4+ */
  -moz-animation:    NAME-YOUR-ANIMATION 8s infinite; /* Fx 5+ */
  -o-animation:      NAME-YOUR-ANIMATION 8s infinite; /* Opera 12+ */
  animation:         NAME-YOUR-ANIMATION 8s infinite; /* IE 10+ */
}

关联

更新 2： --------------------------------------------- --------------------------

Javascript 答案

function blink()
        {       
document.getElementById('blink').className = "animated blink_css";
        }

setInterval(function(){
blink();
},8000)

在 CSS 中--->

      @keyframes 'blink' {
     //your code for animation
                         }

    //try moz for mozilla,o for opera and webkit for safari and chrome 
        .blink_css {
            -webkit-animation-name: blink;
            -moz-animation-name: blink;
            -o-animation-name: blink;
            animation-name: blink;
                   }

        .animated {
            -webkit-animation-duration:8s;
            -moz-animation-duration:8s;
            -ms-animation-duration:8s;
            -o-animation-duration:8s;
             animation-duration:8s;
                  }

更新 3： ------------------------------------------------------------ --------------------------

.paused{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}

只需在需要时添加和删除此类。希望这会有所帮助。干杯！！！

于 2013-07-26T14:30:19.823 回答