How to dynamically create ‘@-Keyframe’ CSS animations?

by

You can insert stylesheet rules dynamically to override previous styles in the head. This helps avoid adding yet another library for a single task.

var style = document.createElement('style');
style.type="text/css";
var keyFrames="\
@-webkit-keyframes spinIt {\
    100% {\
        -webkit-transform: rotate(A_DYNAMIC_VALUE);\
    }\
}\
@-moz-keyframes spinIt {\
    100% {\
        -webkit-transform: rotate(A_DYNAMIC_VALUE);\
    }\
}";
style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, "180deg");
document.getElementsByTagName('head')[0].appendChild(style);

More Related Contents:

  1. How to have html popup appear over main html page?
  2. Write tags in HTML and print
  3. Change from (+) symbol to (-) after click (function(){
  4. How can i create html automatic change page? [duplicate]
  5. Using jQuery to center a DIV on the screen
  6. jQuery: Get height of hidden element in jQuery
  7. How to disable HTML links
  8. Cross-browser multi-line text overflow with ellipsis appended within a fixed width and height
  9. Refresh/reload the content in Div using jquery/ajax
  10. Keep overflow div scrolled to bottom unless user scrolls up
  11. Animate element to auto height with jQuery
  12. How to style “input file” with CSS3 / Javascript? [duplicate]
  13. How to get nth-child selector to skip hidden divs [duplicate]
  14. Dashed border animation in css3 animation
  15. :touch CSS pseudo-class or something similar?
  16. CSS3-Animate elements if visible in viewport (Page Scroll)
  17. Open a new javascript window(.open) along with its CSS styling
  18. How to ONLY trigger parent click event when a child is clicked
  19. How to create a responsive image that also scales up in Bootstrap 3
  20. How can I detect when a new element has been added to the document in jquery?
  21. JavaScript Loading Screen while page loads
  22. Check if element is between 30% and 60% of the viewport
  23. How do I make a move up and down when I’m scrolling the page?
  24. Fade background image in and out with jQuery?
  25. jQuery – Sticky header that shrinks when scrolling down
  26. How do I detect the inherited background-color of an element using jQuery/JS?
  27. Convert dropdown to selection boxes with color and trigger drop down action
  28. Detect if dropdown navigation would go off screen and reposition it
  29. Iframe inherit from parent
  30. Bootstrap Dropdown menu is not working

Leave a Comment