JS.Chi CSS Animations

847 views

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
847
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • CSS Animations are a working proposal of the w3c to enable animations of CSS properties over time.
  • Historically, all animations were done by JavaScript. For example, here’s jQuery animating the opacity of an element from 0 to 1.This has 3 limitations browser vendors were trying to address:Not everyone should need to know JS just to animate somethingPerformanceLighten existing librariesSo, CSS Transition and CSS Animation modules were proposed to the W3C and have been provided by most modern browsers.
  • CSS Transitions, something different from CSS Animations were provided as a basic way to describe how a css property changes from one value to another.
  • CSS Animations are a way to define an animation that is explicitly set on animation.You can think of transitions as implicit and animations as explicit.
  • So lets look at a brief example. I want to animate Hello world’s font-size from 20px to 40px and make it go from green to yellow to red.
  • I’ll define the rules for the animation in a @keyframes animation.I’ll call this the amaze animation.I can define what properties the animation should start with, intermediate states, and how the animation should finish.
  • On click, I’ll set the name of the animation and how long I want it to last for.Once the animation is done, I’ll remove the animation name (this helps with restarting an animation)
  • showing standardneed to use vendor prefixes
  • a keyframes lists an animation name, an optional from, num, and to
  • animation properties are set in CSS or programatically with JS
  • set multiple animations and animation values
  • animation properties you can set
  • 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);});

    ×