How to write CSS3 animations with JavaScript objects?

Question

For the animation library I'm making, I want transitions and animations.

Transitions were simple. I can easily access the transition property from the style property of an element object:

   document.body.style['-webkit-transition'] = "background 1s";
   document.body.background = "#f00";

I know that in CSS, there are 2 parts to animations, @-keyframes and then calling the actual animation.

How do I assign an @-keyframe rule through pure JavaScript?

It wouldn't be something like transitions, because @-keyframe rules aren't applied directly to elements.

An alternative to this would be to dynamically create an @-keyframes rule through JavaScript from a string, and append it to a temporary stylesheet. Kind of sloppy, which is why I'm wondering how to do it directly through the DOM.

Is there a way? From what I have seen on some other sites, you can play animations and stop them at certain keyframes, but how do you create the animations themselves?

Carlo Cannas · Accepted Answer · 2013-12-04 19:54:56Z

1

You have to use the CSSOM, which allows you (among the other things) to manipulate the stylesheets loaded in a document. First of all, you need a stylesheet loaded in your document, where you'll add the @keyframe rules. If you haven't one, you can dynamically create a style HTML element and append it to the head. Then you have to obtain the instance of the CSSStyleSheet interface that represent the stylesheet, you can either retrieve the sheet property of the style (or link) HTML element, or take it from the list available at document.styleSheets.

Once you have the object you can simply call the method insertRule on it, passing the whole rule as a string and for second parameter a number indicating the position (before which rule will be added this one).

If you have to manipulate further the animations, give a look at the APIs: http://www.w3.org/TR/css3-animations/#dom-interfaces http://www.w3.org/TR/DOM-Level-2-Style/css.html

answered Dec 4, 2013 at 19:54

Carlo Cannas

3,28223 silver badges23 bronze badges

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

2 Comments

RickyAYoder Over a year ago

Do you know any down-to-earth tutorials on using CSSOM in JavaScript? Like a blog post or tutorial site?

Carlo Cannas Over a year ago

I searched a bit, but I didn't found much, this article is the best I found: css-tricks.com/…. It makes examples exactly with animation rules.

Community · Accepted Answer · 2017-05-23 10:32:16Z

0

I haven't seen any javascript api solution but it is possible with css styles generated from javaScript.

Check out http://krazyjakee.github.io/jQuery.Keyframes/ if you using jQuery.

If you whant pure javascript solition then take a look at this post

edited May 23, 2017 at 10:32

CommunityBot

11 silver badge

answered Dec 4, 2013 at 19:48

adam187

3,4031 gold badge23 silver badges15 bronze badges

1 Comment

RickyAYoder Over a year ago

Yes. This involves appending the animation as a string into a style tag. Not what I wanted, but I can do that.

Collectives™ on Stack Overflow

How to write CSS3 animations with JavaScript objects?

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related