Scribd
Upload
70 views

CSS Animations and Transitions Cheat Sheet

Uploaded by

Shindry R
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
70 views

CSS Animations and Transitions Cheat Sheet

Uploaded by

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

CSS Animations & Transitions

CSS Transition Syntax Easings


.element { acceleration : ease-out
transition:
$transition-property
$transition-duration deceleration : ease-in
$transition-timing-function
$transition-delay;
} no change : linear
op
tio
.element:hover { na
$transition-property: l! jumps/sprites : steps()
some-new-value;
}

custom : cubic-bezier(w,x,y,z)
The order of these properties doesn’t
matter, except for duration and delay:
duration ALWAYS comes first!

CSS Animation Syntax


.element {
animation:
$animation-name
$animation-duration steeper = faster
$animation-iteration-count
$animation-timing-function
$animation-direction
$animation-fill-mode opti
ona Performance
$animation-play-state; l!
}
Currently browsers share two
performant CSS properties:
@keyframes-$animation-name {
0% { property: start-value; }
100% { property: end-value; }
}
CSS takes seconds
and milliseconds for opacity transform
time values, but
JavaScript uses
milliseconds. But if it isn’t visible,
don’t animate it!

Visit courses.rachelnabors.com and master CSS


Animations and Transitions! Copyright © 2016 Rachel Nabors

You might also like