Guiding Users

We guide users online with the design tools we have available:

color, font, and motion.
Users, like pieces on a game board, must be guided.

Course Outline
• Transitions
• Transforms
• Keyframes Animations
• SVG Animations
Sweet Lands App
Learning to animate this site, which sells the game “Sweet Lands.”

Working knowledge of HTML and CSS are a pre-req for this course.
A bit of JavaScript and jQuery are helpful, but not needed.
Level 1 – Transitions
SECTION 1
Transitioning Color
N
What Is a Transition?
Transitions cause changes to a property and take place over a
period of time.

Instant Transition
Color Change Color Change

instant over time

Prominent Call to Action
A call to action (CTA) is generally the primary goal for a user on a
site. Here, purchasing the game is top priority.

We can use CSS transitions to make the “Buy Now!”

button a prominent call to action on the site.
Styling the Button’s Initial and Hover States
<a href='#' class='btn'>
Buy Now!
</a> initial state

Buy Now!
.btn {
background-color: #00A0D6; hover state
}
Buy Now!
.btn:hover {
background-color: #007DA7;
} A!darker!bg-color!
on!hover
You can transition color in many forms:
white, #FFF, rgb(255, 255, 255).
Transitioning Background Color
Stay subtle with transitions and only dramatize when you really
need to call attention to an element. The!fastest!transition!easily!
Transition recipe: seen!by!the!human!eye!is!.256s.
transition: <property> <duration>;

The transition is added to the starting state.

.btn {
background-color: #00A0D6;
transition: background-color 0.4s ;
}

.btn:hover {
background-color: #007DA7;
} this is backwards
Transitioning Background Color

The transition is added to the starting state.

.btn {
background-color: #00A0D6;
transition: background-color 0.4s ;
}0

.btn:hover {
background-color: #007DA7;
}
Transitioning Multiple Properties
You can transition multiple comma-separated properties.

.btn {
background-color: #00A0D6;
color: #FFFFFF ;
transition: background-color 0.4s, color 0.4s ;
}0
.btn:hover {
background-color: #007DA7;
color: #E3E3E3;
}

initial state hover state

Buy Now! Buy Now!

A Keyword to Transition All Properties
Use the all keyword to transition every changing property.

transition: background-color 0.4s , color 0.4s;

.btn {
background-color: #00A0D6;
color: #FFFFFF;
transition: all 0.4s;
}
.btn:hover {
background-color: #007DA7;
color: #AD7EB6;
}

Be!careful,!though,!because!any!property!
that!can!animate!will!animate.
Transition Recipe
Order is irrelevant as long as you have your duration number
specified before the delay number.

.btn {
transition: <property> <duration> <timing-function> <delay>;
}

Defaults!to!all Defaults!to!ease Defaults!to!0

.btn { .btn {
background-color: #00A0D6; background-color: #00A0D6;
color: #92539E; Y
Y color: #92539E;
transition: all 0.4s ease 0; transition: 0.4s;
} }

Leave!defaults!out!unless!you!need!to!change!them
When to Use Vendor Prefixes
All of our examples are without vendor prefixes, but you might
need to include them.

.btn {

-webkit-transition: background-color .4s;

-moz-transition: background-color .4s;

-ms-transition: background-color .4s;

-o-transition: background-color .4s;

transition: background-color .4s;

}
Which Properties Need Prefixes and When?
Use a site like caniuse.com to check browser support for prefixes.
Level 1 – Transitions
SECTION 2
Transitioning Position
Transition In Hidden Content
Moving hidden content onto the screen is another common use for
transitions. This also adds personality and provides more info to
the user on hover.
Button with extra hidden content

How! c a n !w e !d o !t h i s ?
Steps to Transition In Hidden Button Content
Current button

<section>
<a href='#' class='btn buy-button'>
Buy Now!
</a>
</section>

1. Create 2 inner spans to hold the current and additional

information to be shown on button hover

2. Style the initial and hover states of the button

3. Create a transition between initial and hover states

Creating Spans Inside the Button
<section>
<a href='#' class='btn buy-button'>
<span class="top content">Buy Now!</span>
<span class="bottom content"> On Sale $59 </span>
</a>
</section>

Buy Now!
On Sale $59
Setting Initial Position of Each Span
<section>
<a href='#' class='btn buy-button'>
<span class="top content">Buy Now!</span>
<span class="bottom content">On Sale $59</span>
</a>
</section>

“Absolute” means “position me relative to my nearest positioned parent or document.”

.btn { position: relative; } 0px

.content { position: absolute; }
Buy Now!
.top { top: 0;} 100px
.bottom { top: 100px;} On Sale $59
Setting a New Position on Hover
-100px
.top {top: 0px;}
.btn:hover .top {top: -100px;} Buy Now!
0px
Move each span 100 pixels up On Sale $59
when button is hovered. 100px

.bottom {top: 100px;}

.btn:hover .bottom {top: 0px;}
Transitioning Position
Now we will transition both top and bottom position properties to
slide both content divs up.
Position is not on the list of animatable properties, so we transition top, bottom,
right, left, or all.

.top {top: 0px;}

.btn:hover .top {top: -100px;}
.bottom {top: 100px;}
.btn:hover .bottom {top: 0px;}
.content {
position: relative;
transition: top 0.3s;
}
Need!to!hide!the!overflowing!text
Hiding Content Overflowing the Button
.content {
position: relative;
transition: top 0.3s;
overflow: hidden;
}
Level 1 – Transitions
SECTION 3
Transitioning Visibility
Current Application
Creating the Form and Overlay
Here is the form we are going to display on button click.

<div class='modal-overlay'></div>

<div class='modal'>
<div class='modal-header'>
<a class='modal-close'>&times;</a>
<h3>Purchase Sweet Lands</h3>
</div>

<div class='modal-content'>
<form class='form' action=''>
...
</form>
</div>
</div>
Setting the Initial and Active Modal Styles
Initial Modal State: Hidden

.modal,
.modal-overlay {
visibility: hidden;
opacity: 0;
}

Active Modal State: Visible

.modal.active,
.modal-overlay.active {
opacity: 1;
visibility: visible;
}

.active!class!is!added!when!
the!button!is!clicked
Not All Properties Can Be Transitioned
opacity: 0; f visibility: hidden; Y
Y
Hides element Makes element
— element still transparent to click events
takes up same
width/height.
when!transitioning,!use!these!instead!of!display

display: none;

Removes element
from DOM — does
not transition.
Transitioning Opacity
On button click, the form and overlay don’t simply appear, but
transition in nicely!

.modal,
.modal-overlay {
visibility: hidden;
opacity: 0;
transition: opacity .5s;
}.

But why is it disappearing right

away? What happened to the
fade out?
Visibility Is Not Transitioning Out
We need to also transition the visibility property.

.modal,
.modal-overlay {
visibility: hidden;
opacity: 0;
transition: opacity .5s, visibility .5s;
}.

we!can!also!just! transition: all .5s;

specify!all
How Can We Tell If a Property Can Be Transitioned?
Good rule of thumb: Ask, “Does it have a middle transitioning state?”

start state transitioning end state

state
opacity 0 0.5 1
no possible
display none block
middle state
e n ! be ?! !
! t h a t ! e v
a t ! w o u l d - of ?
w h l a y : ! s o r t
disp
Properties That Can Be Transitioned
background-color margin-bottom padding-bottom
background-position margin-left padding-left
border-left-color margin-right padding-right
border-left-width margin-top padding-top
border-spacing max-height right
color max-width text-indent
font-size min-height text-shadow
font-weight min-width vertical-align
left opacity visibility
letter-spacing outline-color word-spacing
line-height outline-width z-index

They are not set in stone, so always check the

full list of properties that can be transitioned:
http://go.codeschool.com/transitionable-properties
Level 2 – Transforms
SECTION 1
Transforming Rotate
Transforms
CSS transforms let you modify elements in their coordinate space.
They can be rotated, translated, scaled, and skewed.

rotate translate scale

Rotating the Modal Close Icon
initial style for the X

.modal-close {
font-size: 200%;
right: 15px;
top: 0;
position: absolute;
}
Using Transform to Rotate
.modal-close {
font-size: 200%;
right: 15px;
top: 0;
position: absolute;
}
The transformation is jumping from the start
.modal-close:hover { state immediately to the end state.
transform: rotate(360deg);
}.

Rotate takes any number value with “deg” or “turn” unit suffix.

transform: rotate(1turn);
Transitioning the Transform Rotate
.modal-close {
Adding transition: transform will allow us
font-size: 200%; to see the icon changing state over time:
right: 15px;
top: 0;
position: absolute;
transition: transform 4s;
}

.modal-close:hover {
transform: rotate(360deg);
}.
Changing the Timing Function
transition: transform 4s; Timing Functions
Default timing function is ease.
Ease Timing Function ease
linear
ease-in
ease-out
initial
inherit
ease-in-out
See!the!subtle!change!a! cubic-bezier
transition: transform 4s ease-out; different!timing!function!
like!ease-out!can!make?
Ease-out Timing Function
Level 2 – Transforms
SECTION 2
Transforming Scale and Translate
Creating Interactivity With Inputs
Form inputs are an excellent use of animations on the web.
Analyzing the States of the Input Animation
If we break it down, we want our input label to have 2 different
states.
On input:focus, we want the label to
We want the initial state of our label to slide up and scale down, becoming
provide information as a text placeholder. your average label for an input.
Step 1: Transition the Text Color
1. The input label text is Transitioning Color.

initial state
.form-input + .form-label {
position: relative;
padding: 0 1em;
color: #6A7989;
transition: color 0.3s; Only select the first
} label after each input
focused state
.form-input:focus + .form-label {
color: #333333;
CC Number
}

darker!gray
Step 2: Scaling the Label Size

1. The input label is Transitioning Color.

2. The input label is Scaling Down 80% of its original state.

initial state

focused state
Transform Scale
Scale: to stretch an element based on the value multiplier
If only 1 value is provided, it will scale the element in both directions by that value.
transform: scale(2); transform: scale(4, 2);

make it twice the size stretch horizontally by 4, stretch vertically by 2

You can also specify the X and the Y separately:

transform: scaleX(value);

transform: scaleY(value);
Scaling Down the Label as It Moves Up
Scaling down to 80% of its original size and transitioning scale:

.form-input + .form-label { transition!both!

position: relative; color!and!scale
transition: color 0.3s, transform 0.3s;
}

.form-input:focus + .form-label {
color: #333333;
transform: scale(0.8);
}

Why!is!this!label!moving!right?!
We!didn't!change!position?!
The Box Model and Scaling Gotcha
When you scale something down, it still maintains its original box
model size.
Let’s say the “CC Number” label takes No matter how small you scale, the
up 100px height and 400px width. label will still take up 400px x 100px.

CC Number
100%
CC Number
80%
CC Number
70%
CC Number
60%

50% CC Number
The Desired Label vs. the Current Label
label element size
initial state
As we scale the text down inside this
permanent 400x100 label, it scales
around an origin of center.

desired focused state

current focused state

center

center
The Label’s Origin
initial state
As we scale the text down, inside this
permanent 400x100 label, it scales
around the center (200x50).

desired focused state

transform-origin: center center;

current focused state

y origin x origin

y origin (50px)

x origin (200px)
Changing the Label’s Origin
initial state
We can set this transform-origin in
either keywords (center, right,
top…) or in pixels.

desired focused state

transform-origin: center left;

changing!our!!
current focused state x!offset!to!left y origin x origin

y origin (50px)

x origin (0px)
Solution: Set Transform Origin to Center, Left

.form-input + .form-label {
position: relative;
transform-origin: center left;
transition: all 0.3s;
}

.form-input:focus + .form-label {
color: #333333;
transform: scale(0.8);
}
Step 3: Translate the Text Position
1. The input label is Transitioning Color.
2. The input label is Scaling Down to 80%.
3. The input label is Translating Up above the input.

initial state focused state

What Is Translation?
Translate simply means to move something.
X

move right 3 move up 3

transform:translateX(3px); transform:translateY(-3px);

move right 3

move down 3
transform:translate(3px);
Moving the Label Up With TranslateY
On input:focus, the label of the input should move up out of the way.

initial state
.form-input + .form-label {
position: relative;
transition: color 0.3s, transform 0.3s;
}
focused state
.form-input:focus + .form-label {
color: #333333;
transform: scale(0.8) translateY(-40px);
}

Can shorten this transition's line by using the all keyword.

transition: all 0.3s;

move up 40px
Our Input Animates Properly!
1. The input label is Transitioning Color.
2. The input label is Scaling Down to 80%.
3. The input label is Translating Up above the input.

sweet!saucy!sassafras,!it!works!
Level 3 – Keyframes
SECTION 1
Creating and Reusing Keyframes
Our Site So Far
Transitions!

Transforms!
Keyframe Animations
A list of what should happen over the course of the animation —
which properties should change, how, and when.

0% 25% 50% 100%

start end
Using @keyframes to Animate Characters
Animating PNGs on your site can add a lot of personality and fun!

Let’s start animating Beau Knut by moving

just his arm inside a reusable keyframe.
Creating the Swing Keyframe Animation
There are 2 parts to keyframe animations:
1. Create the Animation
2. Assign the Animation

This!custom!name!could!be! Declare the animation

'beau-knut-arm-swing' keyframe recipe

@keyframes swing { @keyframes <name-animation> {

<step 1> {<property>: <value>;}
o 0% {transform: rotate(0deg);} <step 2> {<property>: <value>;}
100% {transform: rotate(-10deg);}
}. }

Define steps of the animation

from is a shortcut for writing 0%
to is a shortcut for writing 100%
 Assign the Animation to an Element
There are 2 parts to keyframe animations:
1. Create the Animation
2. Assign the Animation
@keyframes swing {
o 0% {transform: rotate(0deg);}
100% {transform: rotate(-10deg);}
}.

D u ra t i o n! m u s t ! duration delay
com e ! b e f o re ! de l a y !
#left-arm {
animation: swing 2s 0s infinite ease;
}
Our!donut's!arm!
looks!weird!
name iteration timing function
how!many!times!to!run
Fixing the Arm By Adjusting the Origin
Specify a different transform origin so our arm rotates properly
from the top and not around the elbow.

@keyframes swing {
0% {transform: rotate(0deg);}
100% {transform: rotate(-10deg);}
}.
o
#left-arm {
transform-origin: top center;
animation: swing 2s infinite;
}
Reuse the Swing Animation Keyframe
Now let’s animate the right arm by reusing our swing animation.
@keyframes swing {
0% {transform: rotate(0deg);}
100% {transform: rotate(-10deg);}
}.

#left-arm {
transform-origin: top center;
animation: swing 2s infinite;
}

#right-arm {
transform-origin: top center;
The!same!animation!
animation: swing 2s infinite;
for!both!arms!
}
Level 3 – Keyframes
SECTION 2
Multi-step Keyframes
Adding More Steps to the Animation
Our donut’s arm swing doesn’t feel right with only 2 steps, though.
Let’s add more than 2 steps to make the arm swing look more natural.

@keyframes swing {
0% {transform: rotate(0deg);}
25% {transform: rotate(-10deg);}
50% {transform: rotate(0deg);}
75% {transform: rotate(10deg);}
100% {transform: rotate(0deg);}
}.
 An Even, Linear Spacing of Steps
@keyframes swing {
0% {transform: rotate(0deg);}
25% {transform: rotate(-10deg);}
50% {transform: rotate(0deg);}
75% {transform: rotate(10deg);}
100% {transform: rotate(0deg);}
}.

rotate(0deg) rotate(-10deg) rotate(0deg) rotate(10deg) rotate(0deg)

0% 25% 50% 75% 100%

0s .5s 1s 1.5s 2s
full duration is 2 seconds
 An Ease-out Spacing of Steps
You can space out your keyframes manually,
or use a timing function to do the work. @keyframes swing {
0% {transform: rotate(0deg);}
10% {transform: rotate(-10deg);}
20% {transform: rotate(0deg);}
30% {transform: rotate(10deg);}
100% {transform: rotate(0deg);}
}.
similar!to!ease-out!timing!function

rotate(0deg) rotate(0deg)

0% 10% 20% 30% 100%

0s 2s
full duration is 2 seconds
Condensing Similar Steps
@keyframes swing {
0% {transform: rotate(0deg);}
25% {transform: rotate(-10deg);} If!you!have!any!duplicate!
50% {transform: rotate(0deg);} animation!code...
75% {transform: rotate(10deg);}
100% {transform: rotate(0deg);}
}.

@keyframes swing {
...you!can!condense!the! 0%, 50%, 100% {transform: rotate(0deg);}
duplicates!to!one! 25% {transform: rotate(-10deg);}
comma-separated!line. 75% {transform: rotate(10deg);}
}
Arms Aren’t Moving in Sync
Both arms are rotating to the right and left at the same time, but
we want 1 to move to the left when the other is moving to the right.
Opposites!

Two Options
1. Write 2 different swings for each arm
2. Use a delay on 1 arm to start halfway through
Adding a Delay to the Right Arm
Delaying the right arm by a second will cause the swinging arms to
be in sync.

#left-arm{
transform-origin: top;
animation: swing 2s infinite linear;
}

#right-arm {
transform-origin: top;
animation: swing 2s infinite 1s linear;
}

Giving the right arm a delay will cause the arms

to go in and out together.
Another Keyframe Animation
Now, let’s animate the left foot. We will have it loop infinite every second.

@keyframes swing { #left-leg {

0%, 50%, 100% {transform: rotate(0deg);} animation: tap 1s infinite;
25% {transform: rotate(-10deg);} }
75% {transform: rotate(10deg);}
}

@keyframes tap {
0%, 100% {transform: translateY(0px);}
50% {transform: translateY(-5px);}
}

We want a tapping motion that starts and ends in

the same spot and slightly moves down halfway
through.
Level 3 – Keyframes
SECTION 3
More Advanced Keyframe Animations
Animating Our Form With Keyframes
What Animations Do We Need to Create?
Multiple elements need to be animated to achieve this effect.

#1
fade in the overlay

#3
slide small and fade in the
elements in the modal

#2 slide and fade in the modal

Fading in the modal-overlay
#1
fade in the overlay .modal-overlay.active {
. animation: fadeIn .25s ;
@keyframes fadeIn { }
from {
opacity: 0;
visibility: hidden;

} start hidden
to {
opacity: 1;
visibility: visible;
}
} end visible

The modal is snapping back to its original state as soon as it is done.

Fill-mode Forwards
.modal-overlay.active {
. animation: fadeIn .25s none;
}

The default value for fill-mode is none.

.modal-overlay.active {
. animation: fadeIn .25s forwards;
}}

Fill-mode forwards is used to set the

animation’s final state to the last specified step.
slideUp Keyframe for Entire Modal

@keyframes slideUp {
from {
transform: translateY(400px);
}
to {
start low on the page
transform: translateY(-300px);
}
} end higher on the page

.modal.active {
animation: slideUp .65s .5s forwards;
}
Timing Functions for the Win
When animating a single property, simply specify start/end state
and use a timing function to create the desired timing.
overshoot -500px
@keyframes slideUp {
from {
transform: translateY(400px); -300px ease down
} to final spot
to {
transform: translateY(-300px);
}
}
start fast 400px
modal
custom cubic-bezier timing function

.modal.active {
causes!overshoot!effect!
animation: slideUp .65s .5s cubic-bezier(0.17, 0.89, 0.32, 1.28) forwards;
}
What Is a Cubic Bezier?
WHAT ON EARTH ARE THESE NUMBERS?!

x, y
x, y

cubicbezier.com
All Timing Functions Are Bezier at Heart
cubic Bezier curve

linear cubic-bezier( 0, 0, 1, 1 )
linear

ease cubic-bezier( .25, 1, .25, 1)

ease

ease-in cubic-bezier( .42, 0, 1, 1 )

ease-in

ease-out cubic-bezier( 0, 0, .58, 1 )

ease-out

ease-in-out cubic-bezier( .42, 0, .58, 1)

ease-in-out
Sliding and Fading in the Modal
Assign the fadeIn animation to our .active modal as well.

.modal.active {
animation: slideUp .65s .5s cubic-bezier(…) forwards,
fadeIn .65s .5s forwards;
}
Finishing Form By Animating the Stuff Inside
Creating the slideUpSmall animation

@keyframes slideUpSmall {
from {transform: translateY(80px);}
to {transform: translateY(0);}
}

Assigning slideUpSmall and fadeIn to modal innards when modal is active

.modal-header h3 {
animation: slideUpSmall 0.25s 0.75s forwards,
fadeIn 0.25s 0.75s forwards;
}

.modal.active .form-field {
animation: slideUpSmall 0.25s 0.8s forwards,
fadeIn 0.25s 0.8s forwards;
}
Our Form Looks Hot!
Level 4 – SVG
SECTION 1
Animating SVGs With CSS
Animating Lots of PNGs Together Is Tedious
The donut is comprised of a ton of pieces: arms, legs, body, icing-
fill, icing-outline, eyes, eyebrows — the list goes on.

piece!1
piece!2
piece!3
…
PNG SVG

If we use an SVG donut image, we’ll be able to easily animate the icing, sprinkles, and
any other part of the donut!
 Getting SVG Assets
You can create your own SVG asset or find a free/paid asset online.

Labeling layers in Illustrator will assign

ids in the SVG file when saving it out.

<g id="left-arm">
<path id="fill" d="M123...."/>
<path id="outline" d="M123..."/>
</g>
We!created!our!
SVG!donut!in!
Adobe!Illustrator
What Is SVG?
SVG is a file format that contains vector-based images.
<?xml version="1.0" encoding="utf-8"?>
<svg x="0px" y="0px" viewBox="0 91 612 612">
<style type="text/css">...</style>
<g id="donut">
<g id="right-arm">...</g>
<g id="left-arm">...</g>
<g id="right-leg">...</g> different!animatable!parts!
<g id="left-leg">...</g> are!in!different!elements
<g id="donut-body">...</g>
...
</g>
</svg>

SVG!version!of! SVG!is!written!in!XML,!
the!donut another!tag-based!language!
Replacing PNGs With SVGs
SVG can be dropped in your HTML file wherever you’re normally
loading PNG (or other) images.
<section class='contact' id='contact'> Let's!delete!these!PNG!
<div class='cell well'> images...
<h2>Contact Us</h2>
<div id="donut">
<image id="left-arm" src="https://s3.../left-arm.png"></image>
...
</div>
<p>...</p>
</div> ...and!replace!them!with!one!SVG!image.
</section> <?xml version="1.0" encoding="utf-8"?>
<svg x="0px" y="0px" viewBox="0 91 612 612">
<style type="text/css">...</style>
<g id="donut">
<g id="right-arm">...</g>
<g id="left-arm">...</g>
Bonus: SVG Images Are Always Crisp
Without any additional work, SVG donut is as crisp as the day he
was freshly fried! No!matter!how!much!you!zoom,!
SVG zoomed in SVG!donut!is!still!lookin'!good!

PNG zoomed in
Accessing Elements in SVG
<section class='contact' id='contact'>
<div class='cell well'>
<h2>Contact Us</h2>
<?xml version="1.0" encoding="utf-8"?>
<svg x="0px" y="0px" viewBox="0 91 612 612">
<style type="text/css">...</style>
<g id="donut">
<g id="right-arm" class="st0" d="M302...">...</g>
<g id="left-arm" class="st1" d="M302...">...</g>
<g id="right-leg" class="st2" d="M302...">...</g>
<g id="left-leg" class="st3" d="M302...">...</g>
<g id="donut-body" class="st4" d="M302...">...</g>
<g id="sprinkles" class="st5" d="M302…">…</g>
...
</g>
</svg> We!can!access!specific!SVG!
... tags!with!CSS!selectors
</section>
Elements Accessed in SVG
<g id="donut-body">
<path id="donut-fill" class="st0" d="M302..."/>
<path id="donut-outline" class="st1" d="M302..."/>
<path id="icing-fill" class="st2" d="M503..."/>
<path id="icing-outline" class="st1" d="M237..."/>
</g>

#icing-fill {
fill: #DD3D93;
}

We!couldn't!do!
this!with!PNG!
Animating the Icing-fill Color
We can now animate our icing darker to show our donut’s
frustration with those pesky sprinkles!
SVG!uses!fill!instead!of!
background-color
@keyframes darken {
0% {fill: #FCA9B7;}
100% {fill: #DD3D93;}
}

#icing-fill {
animation: darken 3s infinite;
}
Unique Properties for Styling SVGs
SVG has some unique CSS properties that can be animated.
enable-background
fill
fill-opacity
filter
mask
stroke
stroke-dasharray
stroke-dashoffset
viewport-fill
viewport-fill-opacity

Check out MDN for the full list of SVG properties.

http://go.codeschool.com/svg-css-properties
Shake It Off!
We are getting close! The last animations that need to happen are
the sprinkles and icing shaking and the sprinkles flying off.
Animating Multiple Properties in a Keyframe
This keyframe animation will be used to rotate, scale, and fade the
sprinkles, effectively imitating what sprinkles flying off would look like.
@keyframes flyoff {
0% {transform: rotate(0deg);}
10% {transform: rotate(30deg);} rotating!sprinkles!
20% {transform: rotate(0deg);} back!and!forth
30% {transform: rotate(-30deg);}
40% {transform: rotate(0deg);}
45% {opacity: 1;}
50% { rotating!further!and!scaling!
transform: rotate(100deg) scale(3); really!large!for!"flyoff!effect"
opacity: 0;
}
100% {
reset!the!scale!at!the!end!of!
opacity: 0; the!animation!so!the!loop!looks!
transform: scale(1); more!natural
}
}
The Sprinkle Animation in Action

@keyframes flyoff {
...
}

#sprinkles {
transition: transform 2s;
transform-origin: 302px 337px;
animation: flyoff 3s infinite ease-in;
}
Animating the Icing
The icing is made up of 2 parts: the outline and the filled color.
We've!added!this!same!
animation!to!the!icing-fill... Shake Animation for Icing

#icing-fill { @keyframes shake {

animation: darken 3s infinite, 0% {transform: rotate(0deg);}
shake 3s infinite ease-out; 10% {transform: rotate(30deg);}
20% {transform: rotate(0deg);}
transform-origin: 302px 337px;
30% {transform: rotate(-30deg);}
}
40% {transform: rotate(0deg);}
#icing-outline { 50% {transform: rotate(100deg);}
animation: shake 3s infinite ease-out; }
transform-origin: 302px 337px;
}

...and!to!the!icing-0utline.
Our Donut SVG Is Now Animating Wonderfully