Set the webkit-keyframes from/to parameter with JavaScript

Is there any way to set the from or to of a webkit-keyframe with JavaScript?

A solution of sorts:

var cssAnimation = document.createElement('style');
var rules = document.createTextNode('@-webkit-keyframes slider {'+
'from { left:100px; }'+
'80% { left:150px; }'+
'90% { left:160px; }'+
'to { left:150px; }'+

Just adds a style definition to the header. Would be much cleaner/better to define it though the DOM if possible.

Edit: Error in Chrome with old method

You can use the CSS DOM interface. For instance:

        @keyframes fadeout {
            from { opacity:1; }
            to { opacity:0; }
        <script text="javascript">
            var stylesheet = document.styleSheets[0];
            var fadeOutRule = stylesheet.cssRules[0];
            alert( ); // alerts "fadeout"

            var fadeOutRule_From = fadeOutRule.cssRules[0];
            var fadeOutRule_To = fadeOutRule.cssRules[1];
            alert( fadeOutRule_From.keyText ); // alerts "0%" ( and not "from" as you might expect)
            alert( fadeOutRule_To.keyText ); // alerts "100%"

            var fadeOutRule_To_Style =;

            alert( fadeOutRule_To_Style.cssText ); // alerts "opacity:0;"

            fadeOutRule_To_Style.setProperty('color', 'red'); // add the style color:red
            fadeOutRule_To_Style.removeProperty('opacity'); // remove the style opacity

            alert( fadeOutRule_To_Style.cssText ); // alerts "color:red;"

This example covers several different browsers:

var keyFramePrefixes = ["-webkit-", "-o-", "-moz-", ""];
var keyFrames = [];
var textNode = null;

for (var i in keyFramePrefixes){

keyFrames="@"+keyFramePrefixes[i]+'keyframes cloudsMove {'+
'from {'+keyFramePrefixes[i]+'transform: translate(0px,0px);}'+
'to {'+keyFramePrefixes[i]+'transform: translate(1440px'

textNode = document.createTextNode(keyFrames);

The way I handle this is to not set either the from or to of the element style I am manipulating in the css file and before triggering the animation I will set the element style that it should go to with javascript. This way you are free to dynamically manage what stuff should do until we can manage this directly in js. You only need to specify one of the two. The setTimeout allows the application of the css rule to the element before the animation is triggered otherwise you would have a race condition and it wouldn’t animate.

#someDiv.slideIn {
    -webkit-animation: slideIn 0.5s ease;

@-webkit-keyframes slideIn {
    0% {

    100% {}

var someDiv = document.getElementById('someDiv');"-50px";

To solve this I added a ‘webkit animation name’ to my CSS selector and then created separate rules for my options, in my example red and yellow colouring:

.spinner {
-webkit-animation-name: spinnerColorRed;

@-webkit-keyframes spinnerColorRed {
  from {
    background-color: Black;
  to {
    background-color: Red;

@-webkit-keyframes spinnerColorYellow {
  from {
    background-color: Black;
  to {
    background-color: Yellow;

Then using jQuery:

$("#link").click(function(event) { 
  $(".spinner").css("-webkit-animation-name", "spinnerColorYellow");

Yes, there is a way to do it dynamically with JavaScript. You can use css animation directives in native javascript code with the function Element.animate(). This approach is widely supported across browser, except for IE.

  // keyframes
  { transform: 'translateY(0px)' },
  { transform: 'translateY(-300px)' }
], {
  // timing options
  duration: 1000,
  iterations: Infinity

This function accepts two arguments – keyframes and options. Inside options you can specify the css animation parameters. Inside keyframes you can specify one or many transitional states. In your case with from and to you need two keyframes.

Read More:   How to check if two vars have the same reference?

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Similar Posts