CSS Animation steps() +rehabstudio FE Classes 2016 

CSS Animations 101 1. Define a set of keyframes 1. Apply to DOM elements with timing & behaviour options 1. Profit! 

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% 

CSS Animations 101 Defining keyframes Applying to elements http://codepen.io/njmcode/full/wWXBOL 

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. 

How and why would we prevent interpolation in our CSS animations? 

animation-timing-function: steps(...); 

Specifies the number of interpolated frames which the browser should calculate and render between keyframes. http://codepen.io/njmcode/full/NAzqxq/ 

No content

Examples of how we can use it Loading indicators Monospace font animations Lo-fi / deliberate jank Custom colour ramps Yes, blink / strobe 

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 

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 

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 

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 

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/ 

Questions?