$30 off During Our Annual Pro Sale. View Details »

CSS3 Animations & Transitions

CSS3 Animations & Transitions

A deck about CSS Animations and Transitions for the Web920 Meetup group.

Patrick Rauland

April 15, 2013
Tweet

More Decks by Patrick Rauland

Other Decks in Technology

Transcript

  1. Web 920 CSS3 Animations & Transitions Patrick Rauland @bftrick

  2. About Me

  3. Transitions • Any CSS change based on an element's state

    ◦ hover states ◦ adding a class via js • All CSS, no JS or Flash
  4. Transitions #my-element { transition: all 2s linear; }

  5. Transitions #my-element { transition-property: all; transition-duration: 2s; transition-timing-function: linear; transition-delay:

    500ms; }
  6. Transitions #my-element { transition-property: all; transition-duration: 2s; transition-timing-function: linear; transition-delay:

    500ms; } • The list of properties to transition • ex. ◦ height ◦ opacity ◦ font-size ◦ all ◦ etc
  7. Transitions #my-element { transition-property: all; transition-duration: 2s; transition-timing-function: linear; transition-delay:

    500ms; } • Duration • Ex. ◦ 2s ◦ 2000 ms
  8. Transitions #my-element { transition-property: all; transition-duration: 2s; transition-timing-function: linear; transition-delay:

    500ms; } • Easing • Ex. ◦ linear ◦ ease-in ◦ ease-out ◦ ease-in-out
  9. Transitions #my-element { transition-property: all; transition-duration: 2s; transition-timing-function: linear; transition-delay:

    500ms; } • Delay • Ex. ◦ 2s ◦ 2000ms
  10. Transitions - Browser Support • Firefox • Webkit ◦ Safari

    ◦ Chrome • Opera • IE 10+ • Webkit requires a prefix: ◦ -webkit-transition
  11. Transitions - Examples • http://burnhamrichards.com/ • http://optimalweb.biz/

  12. Animations • A set of CSS states (keyframes)

  13. Madmanimation http://stuffandnonsense.co. uk/content/demo/madmanimation/

  14. Animations #my-element { animation: my-animation 5s; } @keyframes my-animation {

    0% {background: red;} 50% {background: blue;} 100% {background: green;} }
  15. Animations • Let's see that code in action! • http://jsfiddle.

    net/BFTrick/dJ44G/embedded/result/
  16. Animations div { animation-name: my-animation; animation-duration: 5s; animation-timing-function: linear; animation-delay:

    2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } • Name of animation
  17. Animations div { animation-name: my-animation; animation-duration: 5s; animation-timing-function: linear; animation-delay:

    2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } • Duration • Ex. ◦ 5s ◦ 5000ms
  18. Animations div { animation-name: my-animation; animation-duration: 5s; animation-timing-function: linear; animation-delay:

    2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } • Easing • Ex. ◦ linear ◦ ease-in ◦ ease-out ◦ ease-in-out
  19. Animations div { animation-name: my-animation; animation-duration: 5s; animation-timing-function: linear; animation-delay:

    2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } • Delay
  20. Animations div { animation-name: my-animation; animation-duration: 5s; animation-timing-function: linear; animation-delay:

    2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } • Count • Ex. ◦ 1 ◦ 2 ◦ 3 ◦ infinite
  21. Animations div { animation-name: my-animation; animation-duration: 5s; animation-timing-function: linear; animation-delay:

    2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } • Direction of keyframes • Ex. ◦ normal ◦ alternate ◦ reverse
  22. Animations div { animation-name: my-animation; animation-duration: 5s; animation-timing-function: linear; animation-delay:

    2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } • On/off switch
  23. Animations @keyframes my-animation { 0% { background: red; left:0px; top:0px;

    } 100% { background: blue; left:200px; top:200px; } } • Name of animation
  24. Animations @keyframes my-animation { 0% { background: red; left:0px; top:0px;

    } 100% { background: blue; left:200px; top:200px; } } • Keyframe position • Unlimited keyframes • Alternate notation: ◦ to ◦ from
  25. Animations @keyframes my-animation { 0% { background: red; left:0px; top:0px;

    } 100% { background: blue; left:200px; top:200px; } } • CSS styles • Can be just about anything
  26. Animations - Browser Support • Firefox • Webkit ◦ Safari

    ◦ Chrome • Opera • IE 10+ • Webkit requires a prefix: ◦ -webkit-transition
  27. Animations - Examples • http://cleangrooves.net/ • http://production.mcl.bz/ • http://www.enstromhelicopter.com/

  28. Animations - Code Samples • http://daneden.me/animate/ • http://www.spritely.net/

  29. Animations - Inspiration • http://codepen.io/ • http://codepen.io/soulwire/pen/EKmwC • http://codepen.io/SaraSoueidan/pen/sBELl