CSS3 Animations & Transitions

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

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