A brief introduction in the basics of web animation using only CSS.

1. Getting Started with CSS Animations
Adrian Sandu, @adysandu
26 January 2017, DublinCSS

2. Long time ago,
In a web far far away

3. <marquee> and <blink>
CodePen example: https://codepen.io/AdrianSandu/pen/PWmEGd

4. Pseudo-classes ‘:hover’, ‘:focus’, ‘:active’
CodePen example: https://codepen.io/AdrianSandu/pen/bgrEMQ

5. Add a sprinkle of transitions...
CodePen example: https://codepen.io/AdrianSandu/pen/VPzRVY

6. Going wild with transitions...
CodePen example: https://codepen.io/AdrianSandu/pen/jyLRyv

7. “True” animations
CodePen example: https://codepen.io/AdrianSandu/pen/PWmEGd

8. The anatomy of animations
CodePen example: http://codepen.io/AdrianSandu/pen/EZvzWW

9. What does all this mean???
Reference: https://css-tricks.com/almanac/properties/a/animation/

10. Possible values
Reference: https://css-tricks.com/almanac/properties/a/animation/

11. What can you animate?
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

12. High Performance Animations
Reference: https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

13. Questions?