Scribd
Upload
10 views

CSS Animations

Some tips and tricks on CSS animation.

Uploaded by

xandervandenbossche0
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

CSS Animations

Some tips and tricks on CSS animation.

Uploaded by

xandervandenbossche0
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 27

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?

You might also like