Animation School
A crash course in CSS3 and HTML5
RachelNabors.com @RachelNabors
Prepare for class!
- Open Google Chrome
- Go to RachelNabors.com/animation-workshop
- Hang onto yer butts
RachelNabors.com @RachelNabors
Learn old school animation techniques alongside newfangled front-end magic.
And there will be lots of example animations to watch and code along the way!
transition-property: the property you want to transition—Debugging tip! Only some properties are transitionable. Reference this handy list of transitionable CSS properties.transition-duration: how many long the transition lasts in seconds of milliseconds: 4s or 4000mstransition-timing-function: “cushioning” for the transition, defaults to ease.transition-delay: the number of milli/seconds to delay the transition instead of playing right awayYou only need to set two properties to make a working transition, transition-property and transition-duration. The rest is set by default!
transition: <transition-property> <transition-duration> <timing-function> <transition-delay>;
Separate them with a comma.
transition-property: background, left; transition-duration: 1s, 3s;
Group statments with commas.
transition: background 1s, left 3s;
Alternatively, transition all the defined properties with all.
Now try using what you just learned. This will be fun!
See the Pen Rolling a Ball with Transitions by Rachel Nabors, Teaching (@rachelnabors-teaching) on CodePen
Start Coding! cdpn.io/koEjl
Keep this animation project open a bit—we're going to experiment!
In animation, “timing functions” are called “cushioning”
Science! A falling ball picks up speed due to gravity. A rolling ball slows down from friction.
Try rolling your ball with some these timing functions:
linearease-inease-outease-in-outsteps()cubic-bezier(ROLL YOUR OWN!)Timing functions are defined by a bezier curve, which means you can make your own at cubic-bezier.com! Give it a try!
Check out this visual Easings Cheat Sheet
This is one of the few reasons to use JavaScript with your animation.
These are the mandatory play states to handle asset loading:
Because complex interactions have complex needs.
Start all animations with a default parent class of .loading.
jQuery's $(window).load() fires when the browser has all the CSS, images, and JS in place and has painted the window.
Hook into this event to swap the .loading class for .loaded or .playing like so:
$("div").removeClass("loading").addClass("loaded");
Start Coding! cdpn.io/AEjrF
立版古 (tatebanko), popular in Japan for hundreds of years. You can even buy kits today.
Look at the interplay of the different layers in 2.5 dimensions in these examples:
Think of the different pieces of animation as happening on stages... in the DOM!
divs.position for the props and actors.opacity for showing and hiding the scene.The multiple opening scenes are contained in #scene1 and #scene2. Let's have a look inside!
To quickly show or hide a scene, transition opacity quickly from 1 to 0.
Start Coding! cdpn.io/pgACi
display: block/none?Cryptic Answer What does the intermediate step between display: inline and display: block look like?
Answer It's actually extremely performant, as opacity is usually handled directly by the GPU. Don't believe me? Ask Paul Irish.
This one was hard for me to figure out...
CSS masks can't be animated, nor radial gradients. BAH.
I ended up using a big background image that I shrank to fit using background-size
Start Coding! cdpn.io/FJgtC
See the Pen Scene Transitions: Iris Wipe by Rachel Nabors, Teaching (@rachelnabors-teaching) on CodePen
Fading to black is a lot like hiding with opacity, we just slow down the transition-duration and make sure there's a black background.
See the Pen Scene Transitions: Fade to Black by Rachel Nabors, Teaching (@rachelnabors-teaching) on CodePen
Start Coding! cdpn.io/CIpGv
Try it at home! Wouldn't it be cool to fade into a new scene on a layer underneath the old one? That's called a “cross-fade”!
CSS transitions are supported by all browsers in use today, with the exception of IE 9 and lower and Opera Mini.
Check out that support: caniuse.com/#feat=css-transitions
A reminder to everyone to slow down, discuss, and watch cartoons.
Animations share many similar properties and syntaxes with transitions... with a few big differences!
.animated-thing {
animation: black-to-white 1s linear 1;
}
@keyframes black-to-white {
0% { background: #000; }
100% { background: #fff; }
}
animation PropertyLet's have a look under the hood!
.animated-thing {
animation: $name $duration $timing-function $animation-delay $iteration-count;
}
animation Property: Long Formanimation-name: The name of the keyframe block you want to use.animation-duration: how long the animations takes to go from 0% to 100%animation-timing-function: In addition to the previously covered timing functions, this can also take steps()...animation-delay: the number of seconds to delay the animation instead of playing right awayanimation-iteration-count: number of times you want to go from 0% to 100% or infinite to never stop.animation PropertyThat was pretty similar to transition, but animation has a few more very special properties:
.animated-thing {
animation: $name $duration $timing-function $animation-delay $iteration-count $direction $fill-mode $play-state;
}
animation-direction: defaults to normal but can be set to alternateanimation-fill-mode: should the final state of the animation be like 0% or 100%? Use backwards or forwards respectively. Also, can use both. Defaults to backwards (“reset”).animation-play-state: defaults to running but can be set to paused.@keyframes BlockRather than targeting a single property like transition-property does, the @keyframes block can define a group of properties and their values.
@keyframes black-to-white {
0% {
background: #000;
color: #fff;
}
100% {
background: #fff;
color: #000;
}
}
@keyframes Block
@keyframes black-red-white {
0% {
background: #000;
color: #fff;
}
50% {
background: red;
color: blue;
}
100% {
background: #fff;
color: #000;
}
}
.animated-thing {
animation:
black-to-white 1s linear 1,
black-red-white 2s ease-out infinite 2s;
}
You can write it out in long-hand, too, just like with transitions, but I think the above looks tidier.
Best CSS animation reference: css-tricks.com/snippets/css/keyframe-animation-syntax
steps()It splits a block of keyframes into equal steps, then hops between them.
The documentation was written by mathy programmer types.
Tab Atkins tried to explain it, but it's still easier to show you.
Go fiddle with it: cdpn.io/zeFqy
The "Hello World" of animation.
Starring my old comic character Tuna!
Here's the sprite we're using to animate him: stash.rachelnabors.com/animation-workshop/sprite_catwalk.png
See the Pen DIY Catwalk(cycle) by Rachel Nabors, Teaching (@rachelnabors-teaching) on CodePen
Start coding: cdpn.io/cdqga
You can run one animation after another using animation-delay, as in this example:
See the Pen From walk to run by Rachel Nabors (@rachelnabors) on CodePen
Note the importance of animation-fill-mode: forwards. What would happen without it?
Start coding: Make Tuna sit down! cdpn.io/Djcya
“Cut-outs” were invented to save time and money.
Example 1: A classic Disney animation with no cut-outs.
Example 2: In Japan, the technique became the workhorse of animation thanks to Tezuka's pioneering efforts.
One more cool example:
Now it's your turn to have some fun!
We can use this technique to reduce the number of assets required to animate something on a page.
Let's take this apart together.
Challenge, try making her reverse the direction of her hands: cdpn.io/ucBAz
Parallax is when multiple background layers are moved at different speeds to imitate how views change when moving.
Required the multipane camera invented by Ub Iwerks in 1933.
Example 1: Miyazaki uses the technique to establish beautiful countrysides in Princess Mononoke. Watch the mountains and clouds.
Example 2: He uses it more subtly in Howl's Moving Castle. Can you spot the parallax? Say “parallax!” every time you see it.
Example 3: Used masterfully to great effect in The Last Unicorn.
Example 4: Used subtly, it can add extra pop to dynamic designs.
Notice how things in the foreground move faster than those in the background.
Start coding: cdpn.io/qkeou
CSS animations are supported by all browsers in use today, with the exception of IE 9 and lower and Opera Mini.
Check out that support: caniuse.com/#feat=css-animation
Look at the HTML in here:
autoplay will automatically play the file, but it's disabled in some browsers like IE10 RT and iOS Safariloop sets the track to repeat over and over again.preload can be set to auto, metadata or none. Defaults to autosrc or <source>type property lets the browser know whether or not to download the file. Performant! But you can leave it out, and the browser will try to download and play all sources till one works.Now I'd like you to create a looping HTML5 audio element.
Start coding! cdpn.io/ctrBw
To get rid of the gaps, we could use Seamlessloop.js like so.
HTML5 audio's API is pretty meh when it comes to playback and manipulation, but it does have some sweet events.
canplaythrough let's us know when the media should be able to play from start to finish without pause at the current download rate.
You can hide everything behind a loading screen while waiting.
Then you can kick off your .playing state automatically or after a user interaction (preferably the latter)!
See the Pen DIY canplaythrough() demo by Rachel Nabors, Teaching (@rachelnabors-teaching) on CodePen.
Nest this inside our window.load() function to wait until both the window has been painted and the music is ready to play:
song.addEventListener("canplaythrough", function () {}, false);
Start coding: cdpn.io/xGoAH
HTML5 audio is widely supported by all major browsers in use today.
Check out that support: caniuse.com/#feat=audio
Firefox, Chrome, Android, and Opera support ogg/vorbis. IE, Safari, Chrome, Android, and iOS support mp3.
Mobile support requires further reading.
HTML5 Doctor has a great rundown of these audio formats as well as other fun audio bits and bobs.
Now watch this recording of a classic Flash animation from the heyday of Flash animationery!
Ironic that it's a <video> of a Flash animation (at least if you're on mobile). Contemplate the meta-ness of it all.
When I made Candy Halo, I thought I'd need way fancy JavaScript to keep everything in synch.
The solution was deceptively simple.
CSS and Web Audio/JavaScript have separate clocks.
You just need to kick them off at the same time.
Further reading: Chris Wilson's A Tale of Two Clocks
To be visually pleasing on the screen, you need about 60 frames per second.
Frame Rate on the computer is not the same as it is in the movie theatre.
Balance framerate with performance, battery life, quality of animation.
Let's check out some tools that will help you see what's happening where and why.
(AKA “Hardware Acceleration”)
To reduce CPU cycles, you can coerce the GPU into handling them.
The most common way is to use a fake-out 3D transform like so:
.resource-sink {
transform: translateZ(0); //does nothing visually
}
My advice: Trust the browser.
But if it's mission critical, check this out: Let’s Play With Hardware-Accelerated CSS
To enable Chrome's paint rectangles:
Now have a second look at NyanTuna with the web inspector open
Red paint rectangles show what's being repainted by the CPU.
I'd love to see what you create!
/
#