Slide 1

Slide 1 text

CSS Animation steps() +rehabstudio FE Classes 2016

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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%

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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.

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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/

Slide 16

Slide 16 text

Questions?