Safari trip
CSS animations
Tech Talk
1 SVG
Keyframes & animations
Agenda
2
Topics Covered 3 Sprites
4 Some examples
What's a SVG?
Scalable Vector Graphic
Scalable Zoomable Markup(able)
As big as we want As close as we want As colorful as we want
The "magic"
behind a SVG
Keyframes &
animations
why?
Why use animations?
Pages that are 'alive' Guide the user Draw attention
Keyframes
Defines which properties their values
should change in an animation
Can be defined in 'from' and 'to' but also
in percentages, ranging 0% and 100%
animation-name animation-direction
Name of the @keyframes Whether an animation runs
forwards, backwards or alternate
animation-duration animation-timing-function
How long an animation should Specifies the speed curve
Animation take from 0% to 100%
property animation-delay animation-fill-mode
How long an animation should Specifies the element's styling
wait to start at the end of the animation
animation-iteration-count animation shorthand
How many times an animation Clean code!
should run for
Animation-name
Should be the same one as defined by
the @keyframes code block
Animation-duration
Takes a value of n seconds, which
defines the duration of the animation
A negative value would play the
animation as if it had been playing for
n seconds already
Animation-delay
Takes a value of n seconds, which
defines a delay for the start of the
animation
Animation-iteration-
count
Takes a positive integer as value,
which defines how many times an
animation should run for
Can also take infinite as value, which
makes the animation run forever
Animation-direction
Takes 4 different values:
forwards: plays the animation forwards
reverse: plays the animation backwards
alternate: forwards then backwards
alternate-reverse: backwards then forwards
alternating happens between iterations
Animation-timing-
function
Takes one of the following values:
ease: slow start, then fast, then slow end
linear: constant speed
ease-in: slow start
ease-out: slow end
ease-in-out: slow start & end
cubic-bezier(n, n, n, n): custom function
Animation-fill-mode
Takes one of 4 different values:
none: styling goes back to original
forwards: styling stays as defined in the last
keyframe
backwards: element is styled as defined in the
first keyframe once animation starts, even
through delay
both: forwards and backwards combined
square is never the color we originally defined
when fill-mode is set to both
Animation
shorthand
name
duration
timing-function
delay
iteration-count
direction
fill-mode
Accessibility!
People who are motion sensitive
Turning off all animations
Sprite animations
Sprite sheet
Several images on one row
Slight variations between each step
Complexer animations
Setting up the sheet
Div element with the sprite sheet as a
104px background image
Height: equal to the height of the sprite
sheet (184px)
184px
Width: total width of the sprite sheet /
total variations in the sheet (832px / 8)
832px
184px
Animating the sheet
Make the background image move from
the right to the left
to { background-position: -total width of
sprite sheet px }
timing-function: steps(total amount of
variations in the spritesheet)
Some examples
The form lives!
Corey Moen
Animation is a chore
Alfred
Get inspired Tiny guys
Miki Mottes
A movie
josetxu
Your turn!
Draw 👉 Storyboard 👉 Code
Thanks for listening!
Questions?
