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
– Hristo Valkanov, Commented Jul 26, 2013 at 14:28

HIRA THAKUR · Accepted Answer · 2013-07-26 15:03:49Z

0

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

edited Jul 26, 2013 at 15:03

answered Jul 26, 2013 at 14:30

HIRA THAKUR

17.8k14 gold badges60 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

fluxus Over a year ago

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: madebym.me/test/nimbus/index.html Now it only plays once.

HIRA THAKUR Over a year ago

I answered the same kin of problem recently...stackoverflow.com/questions/17766276/… let me know if some problem!!!!

fluxus Over a year ago

@ 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 Over a year ago

Thanks, but that is not what I was searching for. I answered it below.

fluxus · Accepted Answer · 2013-07-26 17:04:23Z

0

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.

answered Jul 26, 2013 at 17:04

fluxus

5595 gold badges16 silver badges31 bronze badges

Collectives™ on Stack Overflow

Controling CSS3 keyframe animation with JavaScript

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related