Set Webkit Keyframes Values Using Javascript Variable

by

Okay, not what your actual code looks like, but you can’t throw JavaScript variables into CSS, it won’t recognize them.

Instead, you need to create the CSS rules through JavaScript and insert them into the CSSOM (CSS Object Model). This can be done a few ways — you can either just create a keyframe animation and add it in, or you can overwrite an existing animation. For this sake of this question, I’m going to assume you want to continually overwrite an existing keyframe animation with different rotation values.

I’ve put together (and documented) a JSFiddle for you to take a look at: http://jsfiddle.net/russelluresti/RHhBz/2/

It starts off running a -10 -> 10 degree rotation animation, but then you can click the button to have it execute a rotation between random values (between -360 and 360 degrees).

This example was hacked together primarily from earlier experimentation done by Simon Hausmann. You can see the source here: http://www.gitorious.org/~simon/qtwebkit/simons-clone/blobs/ceaa977f87947290fa2d063861f90c820417827f/LayoutTests/animations/change-keyframes.html (for as long as that link works, gitorious is pretty bad at maintaining urls).

I’ve also taken the randomFromTo JavaScript function code from here: http://www.admixweb.com/2010/08/24/javascript-tip-get-a-random-number-between-two-integers/

I’ve added documentation to the parts of the Simon Hausmann script that I’ve taken from him (though I’ve slightly modified them). I’ve also used jQuery just to attach the click event to my button–all other script is written in native JavaScript.

I’ve tested this for Chrome 18 and Safari 5.1, and it seems to work fine in both browsers.

Hope this helps.

More Related Contents:

  1. Change Background Color & Font Color Automatically Via CSS [closed]
  2. How do I re-trigger a WebKit CSS animation via JavaScript?
  3. Webkit-based blurry/distorted text post-animation via translate3d
  4. How to use CSS (and JavaScript?) to create a blurred, “frosted” background?
  5. HTML book-like pagination
  6. programmatically changing webkit-transformation values in animation rules
  7. Webkit and jQuery draggable jumping
  8. webkit-transform overwrites z-index ordering in Chrome 13
  9. Freeze Header until Irrelevant (HTML, CSS and JS)
  10. 5 stars and the golden 5 stars are not together (When browsing with Internet explorer)
  11. How to hide css and js version details from weppalyzer in PHP
  12. toggle show/hide div with button?
  13. Textarea Auto height [duplicate]
  14. Relative Paths in Javascript in an external file
  15. Dynamically loading css stylesheet doesn’t work on IE
  16. Positioning element at center of screen
  17. Using jQuery how to get click coordinates on the target element
  18. How do I achieve equal height divs (positioned side by side) with HTML / CSS ?
  19. Why pass parameters to CSS and JavaScript link files like src=”../cnt.js?ver=4.0″?
  20. Blur Img’s & Div’s in HTML using CSS
  21. How to get border width in jQuery/javascript
  22. Include CSS,javascript file in Yii Framework
  23. How to do page numbering in header/footer htmls with wkhtmltopdf?
  24. Scroll Position of div with “overflow: auto”
  25. Placeholder for contenteditable div
  26. Setting the height of a DIV dynamically
  27. assign color to mouse cursor using CSS
  28. Center an Image vertically and horizontally using CSS
  29. Change background on button click, using CSS only? [duplicate]
  30. Looking for a better workaround to Chrome select on focus bug

Leave a Comment