Scribd
Upload
215 views1 page

CSS Animations and Transitions Cheat Sheet

The document outlines the syntax for CSS transitions and animations, detailing the properties involved and their order. It emphasizes the importance of performance, noting that opacity and transform are the most performant properties for animations. Additionally, it provides a link to a course for mastering CSS animations and transitions.

Uploaded by

Shindry R
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
215 views1 page

CSS Animations and Transitions Cheat Sheet

The document outlines the syntax for CSS transitions and animations, detailing the properties involved and their order. It emphasizes the importance of performance, noting that opacity and transform are the most performant properties for animations. Additionally, it provides a link to a course for mastering CSS animations and transitions.

Uploaded by

Shindry R
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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