Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JS.Chi CSS Animations

  • Be the first to comment

  • Be the first to like this

JS.Chi CSS Animations

  1. 1. CSS Animations Justin Meyer Bitovi @justinbmeyer
  2. 2. JS Animations$(#element).css({ opacity : 0}).animate({ opacity : 1}, 1000, function() { console.log(Animation done);});
  3. 3. CSS Transition#mainContent { background-color: #CC0000; transition: background-color .5s ease-in;}#mainContent:hover { background-color: #000000;}
  4. 4. CSS Animation#mainContent { background-color: #CC0000;}@keyframes darken { to { background-color: #000000; }}#mainContent:hover { animation-name: darken; animation-duration: 0.5s;}
  5. 5. Example: HTML<!DOCTYPE html><html> <head> </head> <body> <h1 id=hello>Hello World</h1> </body></html>
  6. 6. Example: CSS<style>@keyframes amaze { from { font-size: 20px; color: green; } 50% { color: yellow; } to { font-size: 40px; color: red; }}</style>
  7. 7. Example: JS<script>var hello = document.getElementById(hello);hello.addEventListener("click",function(){ hello.style.animationName = "amaze"; hello.style.animationDuration = "3s"}, false );hello.addEventListener(animationend, function(){ hello.style.animationName = ;}, false);</script>
  8. 8. Working CSS@-moz-keyframes amaze { from { font-size: 20px; color: green; } 50% { color: yellow; } to { font-size: 40px; color: red; }}@-webkit-keyframes amaze { from { font-size: 20px; color: green; } to { font-size: 40px; color: red;
  9. 9. Working JSvar hello = document.getElementById(hello);hello.addEventListener("click", function(){ var prefix = "webkitAnimation" in hello.style ? "webkit" : "Moz"; hello.style[prefix+"AnimationName"] = "amaze"; hello.style[prefix+"AnimationDuration"] = "4s"}, false);if( WebkitTransition in hello.style){ hello.addEventListener(webkitAnimationEnd, function(){ hello.style.webkitAnimationName = ; }, false);} else { hello.addEventListener(animationend, function(){ hello.style.MozAnimationName = ; }, false);}
  10. 10. @keyframes@keyframes ANIMATION_NAME { from { … } NUM% { … } to { … }}
  11. 11. Animation Propertiesh1 { animation-name: amaze; animation-duration: 3s;}hello.style.animationName= "amaze"hello.style.animationDuration= "3s"
  12. 12. Animation Propertiesh1 { animation-name: amaze, dazzle; animation-duration: 3s, 500ms;}
  13. 13. Animation Propertiesh1 { animation-name: amaze; animation-delay: 3s; animation-duration: 2s; animation-iteration-count: 2; animation-play-state: running; animation-timing-function: linear; animation-fill-mode: forwards;}
  14. 14. Issues• Tricky to replay• CSS Transitions• Vendor Prefixes• Performance• Support (IE 9)
  15. 15. jQuery++ animation• http://jquerypp.com/#animate$(#element).css({ opacity : 0}).animate({ opacity : 1}, 1000, function() { console.log(Animation done);});

×