使用JavaScript控制CSS3关键帧动画

Question

I have a simple keyframe animation:

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

Here is the JS part:

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

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

 },800);

Now, I would need it to play over a specified time interval, about 8 seconds. How to accomplish this, maybe with adding and removing class with the animation syntax was what came to my mind. But I tried setInterval, and it added the class, but when I created another interval for removing the class, the animation just wouldn't start.

Answer 1

You can do it by pure css also..

#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

UPDATE 2: -------------------------------------------------------------------------

Javascript answer

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

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

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

UPDATE 3: -------------------------------------------------------------------------

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

Just add and remove this class whenever you need .Hope this helps.Cheers!!!

Answer 2

This is one way of doing this, other that animationEnd or animationStart events. Just toggle the class on the desired element, and set the intreval at which you want the animation to start over again.

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

Now, the truck lights will blink every 10 seconds.