CSS Animation & Easing Functions
- Master CSS animations and easing functions.
- What Are CSS Animations?.
- Covers transitions vs keyframes.
- Covers easing functions.
- Covers performance.
What Are CSS Animations?
CSS animations let you change property values over time without JavaScript. Two mechanisms exist: transitions for simple state changes and keyframe animations for complex multi-step sequences.
The key principle is restraint. Every animation should have a purpose.
Transitions vs Keyframes
CSS transitions are simpler. Define a property, duration, and easing function. Keyframe animations are more powerful with named stages.
-webkit-backdrop-filter alongside backdrop-filter for Safari support. Without the prefix, the effect is invisible to roughly 25% of mobile users.Use transitions for hover effects. Use keyframes for loading spinners and entrance animations.
Easing Functions
Easing functions control the rate of change. Linear moves at constant speed. Ease starts slow, speeds up, then slows down.
backdrop-filter inside a position: fixed element can cause severe scroll performance issues. Test thoroughly on real iOS devices.Custom cubic-bezier curves give precise control over the acceleration curve.
Performance
Transform and opacity animate on the GPU at 60fps. Width, height, and margin trigger expensive layout recalculation.
Stick to transform and opacity whenever possible. This single rule solves most performance issues.
Accessibility
Some users experience discomfort from animations. The prefers-reduced-motion media query lets you respect this.
Wrap decorative animations in @media (prefers-reduced-motion: no-preference) so they only run when appropriate.