Intro to CSS Animations

Here's a workshop I did on the basics of CSS animations. All you need is very minimal knowledge of HTML/CSS and the latest version of Google Chrome to follow along!

Download the PowerPoint file here (complete with GIFs!): http://cl.ly/c6Ir/Intro%20to%20CSS%20Animations.pptx

## Links in this presentation:

- How the properties will animate: http://codepen.io/LabLayers/pen/MwzgNB
- Full list: http://easings.net/
- Transitions followalong, Start here: http://tiny.cc/csstransitions
- Transitions followalong, End result: http://tiny.cc/csstransitions2
- Keyframes followalong, Start here: http://tiny.cc/csskeyframes
- Keyframes followalong, End result: http://tiny.cc/csskeyframes2
- Cool examples:
- http://codepen.io/bennettfeely/pen/ErFGv
- http://cssdeck.com/labs/felix-the-magic-bag-animation
- http://www.species-in-pieces.com/
- http://bennettfeely.com/csscreatures/
- http://www.sanrio.com/timeline
- Where I Use CSS Animations:
- http://brainitch.com/ers/
- http://booksmart.it/
- https://everfreenw.com/archive/2015/everfree-northwest-2015/index.html
- https://chrome.google.com/webstore/detail/harlem-shake-the-web/ldejkceiibdbkgjfiagpjhjdadgkelib?hl=en
- Advice for Beginners: https://www.youtube.com/watch?v=E1oZhEIrer4

## Presented at:

- Leangap Boston 7/26
- Wine & Code Philly 7/27
- Princeton University 7/29

Transcript

1. Intro to CSS Animations with Victor Lourng
2. Hi, I’m Victor. •I make websites for a living. •Yes, I’m in high school.
3. What is an animation? •A change from one style to another.
4. What is an animation? •A change from one style to another. • Properties • Transitions • Keyframes
5. Properties •Attributes of an element being changed Color
6. Properties •Attributes of an element being changed Color
7. Properties •Attributes of an element being changed Color Shape
8. Properties •Attributes of an element being changed Color Shape
9. Properties •Attributes of an element being changed Position Color Shape
10. Properties •Attributes of an element being changed Position Color Shape
11. Properties •Attributes of an element being changed • Size • Rotation • Opacity • (and so on)
12. Transition •How the properties will animate • http://codepen.io/LabLayers/pen/MwzgNB •Full list: • http://easings.net/ •Why is this important? • Cars • Tennis balls
13. Keyframes •Steps of attributes (and sometime transitions) • At 0%, move down • At 25%, move right • At 50%, move up • At 75%, move left
14. Keyframes •Steps of attributes (and sometime transitions) • At 0%, move down and turn green • At 25%, move right and turn blue • At 50%, move up and turn purple • At 75%, move left and turn red
15. What is an animation? •A change from one style to another. • Properties • Attributes of an element being changed • Transitions • How the properties will animate • Keyframes • Steps of attributes (and sometime transitions)
16. Put it together and you’ll get…
18. Animating Elements in CSS •It’s not that hard (really!)
19. Animating Elements in CSS •It’s not that hard (really!) • Properties • Attributes of an element being changed • Transitions • How the properties will animate • Keyframes • Steps of attributes
20. Translation into CSS •It’s not that hard (really!) • Properties • Standard CSS properties like color: red • Transitions • transition: all 500ms linear; • Keyframes & Animations • @keyframes myAnimation { } • animation: myAnimation;
21. CSS Transition Syntax transition: color 200ms linear 500ms; transition-property: color; transition-duration: 200s; (transition-timing-function: linear;) (transition-delay: 500ms;)
22. CSS Transitions •It’s simple. .button { background: purple; color: white; } .button:hover { transition: 300ms all ease; background: white; color: purple; }
23. CodePen Follow-Along • Start here: • http://tiny.cc/csstransitions • End result: • http://tiny.cc/csstransitions2 • Click the icon in the bottom right hand corner to toggle display mode
24. CSS Keyframe Syntax .circle { animation: my-animation 5s; } @keyframes my-animation { 0% {background: red;} 50% {background: blue;} 100% {background: green;} }
25. CSS Animation Syntax animation: my-animation 5s linear 0s infinite alternate running; animation-name: my-animation; animation-duration: 5s; (animation-timing-function: linear;) (animation-delay: 0s;) (animation-iteration-count: infinite;) (animation-direction: alternate;) (animation-play-state: running;)
26. CodePen Follow-Along • Start here: • http://tiny.cc/csskeyframes • End result: • http://tiny.cc/csskeyframes2
27. Chrome Developer Tools • Great for debugging Javascript & CSS • Right an element with an animation and select Inspect Element • On the right Styles pane, you can slow all animations or change the curve
28. Cool Examples • http://codepen.io/bennettfeely/pen/ErFGv • http://cssdeck.com/labs/felix-the-magic-bag-animation • http://www.species-in-pieces.com/ • http://bennettfeely.com/csscreatures/ • http://www.sanrio.com/timeline
29. Where I Use CSS Animations • http://brainitch.com/ers/ • http://booksmart.it/ • https://everfreenw.com/archive/2015/everfree-northwest- 2015/index.html • https://chrome.google.com/webstore/detail/harlem-shake- the-web/ldejkceiibdbkgjfiagpjhjdadgkelib?hl=en Advice for Beginners • https://www.youtube.com/watch?v=E1oZhEIrer4
30. Thank you!