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.

0

Share

Download to read offline

JS.Chi CSS Animations

Download to read offline

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • 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);});

Views

Total views

1,091

On Slideshare

0

From embeds

0

Number of embeds

3

Actions

Downloads

10

Shares

0

Comments

0

Likes

0

×