IE10 – CSS animation not working

by

The standard syntax is supported in Internet Explorer 10 with no need for the -ms prefix on the keyframes declaration, nor on the animation-name property. In fact, IE10, like the other vendor products, supports the shorthand animation property alone as well:

@keyframes myanimation {
    0%   { color: black; }
    80%  { color: gold; transform: translate(20px,20px); }
    100% { color: black; translate(0,0); }
}

#anim {
    display: inline-block;
    animation: myanimation 5s 5; /* use myanimation 5s duration, 5 times */
}

Fiddle: http://jsfiddle.net/ZfJ4Z/1/

More Related Contents:

  1. How to have multiple CSS transitions on an element?
  2. css3 animation on :hover; force entire animation
  3. CSS Animations with delay for each child element
  4. CSS3 animation with gradients [duplicate]
  5. CSS3 – 3D Flip Animation – IE10 transform-origin: preserve-3d workaround
  6. CSS3 Continuous Rotate Animation (Just like a loading sundial)
  7. How to create a pulse effect using -webkit-animation – outward rings
  8. How To Sync CSS Animations Across Multiple Elements?
  9. CSS3 Chain Animations
  10. Change Background Color & Font Color Automatically Via CSS [closed]
  11. How to fade animate background images (full size) [closed]
  12. How do I target only Internet Explorer 10 for certain situations like Internet Explorer-specific CSS or Internet Explorer-specific JavaScript code?
  13. Remove IE10’s “clear field” X button on certain inputs?
  14. How to reverse an animation on mouse out after hover
  15. How to animate handwriting text on the web page using SVG?
  16. how to do a simple scaling animation and why isn’t this working?
  17. CSS Auto hide elements after 5 seconds
  18. CSS3-Animate elements if visible in viewport (Page Scroll)
  19. Performance of CSS Transitions vs. JS animation packages
  20. How do you detect when CSS animations start and end with JavaScript?
  21. Printing HTML table with many columns/rows using CSS layout?
  22. CSS Animation onClick
  23. CSS display none and opacity animation with keyframes not working
  24. Background-size with SVG squished in IE9-10
  25. matplotlib save animation in gif error
  26. Javafx : How can I produce an animation with 3D path?
  27. Animate CSS background-position with smooth results (sub-pixel animation)
  28. AngularJS css animation + done callback
  29. In JavaFX how do I move a sprite across the screen?
  30. How to make an animation with CSS in JavaFX?

Leave a Comment