Question

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

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，它添加了类，但是当我创建另一个删除类的间隔时，动画就不会启动了。

Answer 1

你也可以通过纯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+ */
}

LINK

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

Javascript回答

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

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

IN CSS ---＆gt;

      @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;
}

只需在需要时添加和删除此类。希望这有帮助。欢呼!!!

Answer 2

这是执行此操作的一种方式，其他是animationEnd或animationStart事件。只需在所需元素上切换类，并设置想要重新开始动画的intreval。

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

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

使用JavaScript控制CSS3关键帧动画

2 个答案: