CSS Animation to Tell a Story

Sarah Drasner Basho Technologies Riak, an open source, distributed database
@sarah_edo on twitter http://codepen.io/sdras artemist on github

What we will be Covering •  Covering your tucus • 
Storyboarding •  Transitions/ Animations •  Keyframe step animations (like cel) •  Transforms •  Parallax •  Cool tricks for getting around svg + browser compatibility

What we are not Covering •  3-D animations •  Preprocessors
and mixins (though totally rockin) •  Responsive •  Audio, though I will use just a little 

Before we Begin Animating Prefix-free! Created by Lea Verou - 
Minified it’s only 2KB (!!!) -  Remember @imported files not supported -  Not actually all that good for gradients because there are two different syntaxes for versions in Chrome -  Don’t even front, it’s awesome -  7 sec animation- from 1500, to 410 lines!

Before we Begin Animating Good Resets •  html5boilerplate https://github.com/h5bp/html5-boilerplate • 
http://html5doctor.com/html-5-reset-stylesheet/

Before we Begin Animating Warning for unsupported browsers •  Leverage
modernizr, production tab •  Go to the page, make shivs for o  2-D animation o  3-D animation o  @fontface o  3-D transforms o  CSS transitions o  html5 shiv o  background-size o  hsla() •  <html class="no-js" lang="en"> •  Use a little jQuery magic, link to supported browsers

Storyboarding

Storyboarding Allows you to work piece by piece •  Figure
out what you want to say, edit and then later figure out timing •  Work backwards, unveil things •  Figure out the kind of animation •  Figure out composition, and layering of objects •  Figure out if you want your user to trigger behaviors •  Good UI •  Like a comic! Who doesn’t like comics.

Storyboards •  From this: http://rachelnabors.com/css-amv-talk/storyboard/index.html •  To this: http://rachelnabors.com/css-amv-talk/animation/index.html

Animation vs. Transistion Animation •  For chained events •  Changing
a number of properties at a time •  Loops •  For when you want to have things go in forwards or reverse or even alternating •  Things that are hand- drawn Transistion •  Smaller pieces •  When you want something to happen once •  Good for little layout pizzaz

Syntax Transitions transition: <transition-property><transition- duration> <transition-timing-function> <transition-delay>; Animations animation: <name>
<duration> <timing- function> <animation-delay><iteration- count><animation-direction><animation-ﬁll- mode>;

Transitionable Properties background-color background-position border-color border-width border-spacing bottom clip color
crop font-size font-weight height left letter-spacing line-height margin max-height max-width min-height min-width opacity outline-color outline-oﬀset outline-width padding right text-indent text-shadow top vertical-align visibility width word-spacing z-index

Transforms

Transform So many properties! •  Skew (based on coordinates) o 
Transform: skewX(0.5); or skewY(0.5); or skew(0.5, 1); •  Translate (based on coordinates) o  Transform: translateX(0.5); or translateY(0.5); or translate(0.5, 1); •  Matrix (based on coordinates) o  Transform: matrix(a, b, c, d, tx, ty); o  http://peterned.home.xs4all.nl/matrices/ •  Rotate (clockwise, counter-clockwise) o  Transform: rotate(10deg); •  Scale (solid numbers or decimal) o  Transform: scale(0.5); or scale(0.5, 1); *and don’t forget transform-origin (default is center)

Examples! Everyone loves those. http://sarahdrasnerdesign.com/transform_intro/ https://github.com/artemist/Transform_intro

Other Things So many properties! •  Opacity- this is key.
Don’t use display:none; •  For simple interactivity, use pseudo elements like :hover, :active, :target, etc •  Never use js when a transition will do •  Can use class and hover state for same transition/ animation with many different objects

Animation

Animation So many properties! •  Animation-name o  You pick • 
Animation-duration o  In seconds (s) or milliseconds (ms) •  Animation-timing-function o  Linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier (#) o  See http://cubic-bezier.com •  Animation-delay o  Same with s and ms, really key for multiple animations •  Animation-iteration-count o  Number times it runs, or inﬁnite for loop •  Animation-direction o  Normal, reverse, alternate (every other), reverse-alternate (same but starts in reverse) •  Animation-fill-mode o  forwards, backwards, none, both o  Val Head: http://www.valhead.com/2013/01/04/tutorial-css-animation-ﬁll- mode/

Syntax animation: <name> <duration> <timing-function> <animation-delay><iteration-count><animation- direction><animation-fill-mode>; *the order is
not that important except for the time elements (duration, animation-delay, and iteration count). @keyframes { 0% { } 100% { /* things you want to have happen */ } } *actually you don’t need the 0% if its set at nothing.

Syntax animation: <name> <duration> <timing- function> <animation-delay><iteration- count><animation-direction><animation- fill-mode>; There
is also animation-play-state: paused/running; good for if you want to use jQuery to trigger events

Steps vs. Transform Steps •  For when you have a
really complicated form, especially when it is hand- drawn •  When you’re good at drawing in photoshop or illustrator or have someone working for you that is. •  Spriting Transform •  Simpler forms moving and scaling or changing colors, etc •  You want to create it in CSS or with other coding techniques (not drawing) •  Simpler to adjust later (because more parameters are set in the code)

Steps •  Very close to old cel animations •  With
photoshop or illustrator, have pieces that move very incrementally •  Use a script like guideguide.me in photoshop to very accurately stack layers of an image at even interval •  Steps() is most key! •  Don’t forget you can add classes on top of an element and animate those too

Steps- Creation •  Make the drawings by saving incrementally, save
into a folder •  In Photoshop, scripts> load files into stack •  Go to window > extensions > guideguide.me •  Can get hand-drawn feel, by hand or with tools like wacom inkling

scripts> load files into stack

http://codepen.io/sdras/pen/upjLK

Steps- Tips •  Use imageoptim for superior image compression: http://imageoptim.com/
•  Make a container for the animated image •  Absolutely position that element •  Test on localhost with MAMP while you are trying things out: http://www.mamp.info/en/index.html •  Don’t forget you can add classes on top of an element and animate those too!

Parallax Powerful technique for creating the illustion of 3-Dimensional space
This: https://github.com/404 (we’ve all seen it, it’s ok) Changing depending on the point of view of the viewer, and depth of ﬁeld is key. But no js! Alexis Goldstein- Learning CSS3 Animations and Transitions

Things you need! •  The background image must scroll seamlessly
•  The background image should be 2x the size of the area where your animation is •  Absolutely position, z-index it back if needed and then move it oﬀ the canvas the length of the image •  In this animation, we will negatively apply the width and then inﬁnite loop it in the animation properties

Another example! SPACE (b-movie-style) http://codepen.io/sdras/pen/zrLFq

Cool Tricks •  Have two background images and the higher
z-index value is mostly transparent •  Have secondary elements or characters in middleground •  Make sure you cut your images well and have a small 2px feather on the border of the topmost image if it’s got dimension •  Think foreground, middleground, background and make sure the things that are farther away are smaller and lower contrast •  Use device orientation! Good documentation here: https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/ Events/Using_device_orientation_with_3D_transforms

Yet another example! Let’s just watch coding cartoons all day.
This, all drawn with CSS (I didn’t make this one) http://codepen.io/m-kafiyan/pen/yhvgF This is awesome, but there’s a better way.

Cooler Tricks •  Support for SVG is still just climbing
into newer versions.

Cooler Tricks •  Support for SVG is still just climbing
into newer versions and the syntax for coding can be complex •  You already know fonts. And fonts are just svgs. •  Fontagrapher5 or icomoon.io app

Font sizing with rem (relative em): http://snook.ca/archives/html_and_css/font-size-with-rem

Last example! From this http://codepen.io/sdras/pen/299b2bff6bdffee4057b6a713cf25c83 To this http://sarahdrasnerdesign.com/submarine/ http://codepen.io/sdras/pen/6c6d4809c0f4f4098c89846f709609a7

Chained events •  Combo of prefix-free and font-icons means such
a small amount of code that you can add keyframes galore without bloating up your load time •  Create chained events with timing delays •  Trigger new events with user interactivity to the next parts of the animation (use js to fire it off)

Sarah Drasner @sarah_edo on twitter

CSS Animation to Tell a Story

CSS Animation to Tell a Story

Other Decks in Technology

Featured

Transcript