CSS Animations
David Khourshid @davidkpiano
Fundamentals
Why animate?
Style and branding.
Guidance and clarification.
Fundamentals
Duration
How long an iteration of an animation takes to complete.
0s
1s
2s
Fundamentals
Delay
How long it takes before an animation starts
0s
0.5s
1.5s
Fundamentals
Timing function
The easing of an animation.
cubic-bezier(0.5, 0, 0.5, 1)
Fundamentals
CSS Variables
Also known as CSS Custom Properties
:root {
--duration: 2s;
}
.thing {
animation-duration: calc(var(--duration, 1s));
}const thingEl = document.querySelector('.thing');
thingEl.style.setProperty('--color', 'green');Fundamentals
What to animate
✅ Transform and opacity
👍 Color and background
❌ Height, width, left, right, etc.
Transitions
Animations
Choreography
States
Layout animations
Reactive animations
Frontend Masters CSS Animations Workshop
By David Khourshid
