Set the webkit-keyframes from/to parameter with JavaScript

javascript webkit css

27,187

Solution 1

A solution of sorts:

var cssAnimation = document.createElement('style');
cssAnimation.type = 'text/css';
var rules = document.createTextNode('@-webkit-keyframes slider {'+
'from { left:100px; }'+
'80% { left:150px; }'+
'90% { left:160px; }'+
'to { left:150px; }'+
'}');
cssAnimation.appendChild(rules);
document.getElementsByTagName("head")[0].appendChild(cssAnimation);

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

Solution 2

You can use the CSS DOM interface. For instance:

<html>
    <body>
        <style>
        @keyframes fadeout {
            from { opacity:1; }
            to { opacity:0; }
        }
        </style>
        <script text="javascript">
            var stylesheet = document.styleSheets[0];
            var fadeOutRule = stylesheet.cssRules[0];
            alert( fadeOutRule.name ); // 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 = 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;"
        </script>
    </body>
</html>

Solution 3

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'
'px,0px);}}';

textNode = document.createTextNode(keyFrames);
document.getElementsByTagName("style")[0].appendChild(textNode);
}

Solution 4

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% {
        left:0px;
    }

    100% {}
}


var someDiv = document.getElementById('someDiv');
someDiv.style.left = '-50px';
setTimeout(function(){
    someDiv.addClass('slideIn');
},0);

Solution 5

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) { 
  event.preventDefault();
  $(".spinner").css("-webkit-animation-name", "spinnerColorYellow");
});

View more solutions

27,187

Ricardo

Updated on July 09, 2022

Comments

Ricardo almost 2 years

Is there any way to set the from or to of a webkit-keyframe with JavaScript?
- Adam Heath almost 14 years
  
  I am also interested in this. I believes he means to define the animation (@-webkit-keyframes for webkit) from Javascript. Spec: w3.org/TR/css3-animations
- Adam Heath almost 14 years
  
  Just noticed right down at the bottom of that spec, there is a DOM interface for this, quoted as "CSS animation is exposed to the CSSOM through a pair of new interfaces describing the keyframes." Does anyone know how this is accessed/used via Javascript?
- Matthew Wilcoxson over 11 years
  
  @adam-heath - see my answer for an example of using the DOM interface.
Eli Grey about 13 years

Why don't you use the CSSOM API instead?
m93a over 11 years

Don't use jQuery where it's not necessary... And this is the case where it's not.
PoeHaH almost 6 years

@EliGrey 7 years later, the browser compatibility of CSSOM is still low.