Controling CSS3 keyframe animation with JavaScript

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.

Providing a jsfiddle with what you tried will be nice will be nice :) — Hristo Valkanov, Jul 26 '13 at 14:28

HIRA THAKUR · Answer 1 · 2013-07-26T15:03:49.033

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!!!

Thanks, but i tried infinite. Then the lights blink the whole time. I need them to blink two times, then again after 8 seconds. This is the test link: http://madebym.me/test/nimbus/index.html Now it only plays once. — fluxus, Jul 26 '13 at 14:38
I answered the same kin of problem recently...http://stackoverflow.com/questions/17766276/how-to-change-the-duration-of-a-css3-keyframes-animation-with-raw-javascript/17766334#17766334 let me know if some problem!!!! — HIRA THAKUR, Jul 26 '13 at 14:46
@ MESSIAH I think you didn't got me:) I need the animation to start, then wait for 8 seconds, and then play again. And like that for infinity! — fluxus, Jul 26 '13 at 14:47
Thanks, but that is not what I was searching for. I answered it below. — fluxus, Jul 26 '13 at 17:05

score 0 · Answer 2 · answered Jul 26 '13 at 17:04

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.

Controling CSS3 keyframe animation with JavaScript

2 Answers2