Getting Started with CSS Animations

Adrian Sandu, @adysandu26 January 2017, DublinCSS

Long time ago,In a web far far away

<marquee> and <blink>

CodePen example: https://codepen.io/AdrianSandu/pen/PWmEGd

Pseudo-classes ‘:hover’, ‘:focus’, ‘:active’

CodePen example: https://codepen.io/AdrianSandu/pen/bgrEMQ

Add a sprinkle of transitions...

CodePen example: https://codepen.io/AdrianSandu/pen/VPzRVY

Going wild with transitions...

CodePen example: https://codepen.io/AdrianSandu/pen/jyLRyv

“True” animations

CodePen example: https://codepen.io/AdrianSandu/pen/PWmEGd

The anatomy of animations

CodePen example: http://codepen.io/AdrianSandu/pen/EZvzWW

What does all this mean???

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

Possible values

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

What can you animate?

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

High Performance Animations

Reference: https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

Questions?