How to change the duration of a CSS3 keyframes-animation with raw JavaScript

Question

Is there a way to change the duration of a CSS3 keyframes animation with JavaScript? In CSS you can do that with the animation-duration property:

animation-duration: 1s;

The JavaScript should be raw, i don't want to include jQuery or other JS librarys into my site.

@MESSIAH I'm creating a CSS animation library with a simlpe JS framework which attaches the animations to events. — no92
– no92, Commented Jul 20, 2013 at 20:48

Community · Accepted Answer · 2017-05-23 12:24:30Z

12

You can assign css classes in javascript and put your transition/duration/animation in those css classes Or you can assign your css directly in javascript.

document.getElementById('your_id').style.animationDuration="1s";

for cross browsers we can use o,moz,ms and webkit as prefix.

Example-:

 document.getElementById('your_id').style.webkitTransitionDuration="1s";

EXAMPLE

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

// In css

.animated {
    -webkit-animation-fill-mode:both;
    -moz-animation-fill-mode:both;
    -ms-animation-fill-mode:both;
    -o-animation-fill-mode:both;
    animation-fill-mode:both;
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    -ms-animation-duration:1s;
    -o-animation-duration:1s;
    animation-duration:1s;
}

  @keyframes 'blink' {
   0% { background: rgba(255,0,0,0.5); }
   50% { background: rgba(255,0,0,0); }
   100% { background: rgba(255,0,0,0.5); 
}
//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;
    }

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Jul 20, 2013 at 20:20

HIRA THAKUR

17.8k14 gold badges60 silver badges87 bronze badges

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

1 Comment

no92 Over a year ago

Thank you, this works for me in Chrome. To read the value, you have to use window.getComputedStyle

Collectives™ on Stack Overflow

How to change the duration of a CSS3 keyframes-animation with raw JavaScript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related