CSS Animation steps()

A look at one of the more esoteric CSS animation properties: steps(). Originally given as a FE team night class for +rehabstudio in July 2016.

Transcript

1. CSS Animation steps() +rehabstudio FE Classes 2016
2. CSS Animations 101 1. Define a set of keyframes 1. Apply to DOM elements with timing & behaviour options 1. Profit!
3. CSS Animations 101 Think of keyframes as points on a timeline. At each keyframe, you change CSS properties. (Think Flash, After Effects, etc) 0% (start) (end) 100%
4. CSS Animations 101 Defining keyframes Applying to elements http://codepen.io/njmcode/full/wWXBOL
5. Default CSS behavior : interpolation By default the browser ‘fills in the gaps’ of our keyframes by interpolating between them. Color, position, size, rotation etc all happen smoothly, affected by timing functions (easing etc), between keyframes. However, we might want to prevent interpolation in certain cases.
6. How and why would we prevent interpolation in our CSS animations?
7. animation-timing-function: steps(...);
8. Specifies the number of interpolated frames which the browser should calculate and render between keyframes. http://codepen.io/njmcode/full/NAzqxq/
10. Examples of how we can use it Loading indicators Monospace font animations Lo-fi / deliberate jank Custom colour ramps Yes, blink / strobe
11. Step-based loading icons normally require GIF generation, Canvas or DOM manipulation in JavaScript. Using steps() with keyframes helps to recreate the effect without any asset or JavaScript dependency. Loading indicators http://codepen.io/njmcode/pen/kXpWmE
12. With a bit of calculation, we can do a ‘typing’ effect with a monospace font without needing to use JavaScript to reveal the characters one line at a time. YMMV depending on font metrics. Monospace font animations http://codepen.io/njmcode/pen/WxyQpd
13. For pixel art, retro and ‘damaged / broken’ aesthetics, it might be preferable to jank up the motion of an animation to make it less smooth. Lo-fi motion http://codepen.io/njmcode/pen/yJEYPR
14. Instead of relying on the CSS engine to perform true-colour interpolation of colors, you could create your own keyframe-based interpolation using a limited palette. Very useful for emulating old retro effects and having complete control over your colour ramps. Custom colour ramps http://codepen.io/njmcode/pen/QEryaV
15. MOAR LINKS https://developer.mozilla.org/en/docs/Web/CSS/timing-function https://css-tricks.com/using-multi-step-animations-transitions/ http://designmodo.com/steps-css-animations/
16. Questions?