CSSCSSPerformance
Modern CSS Animations: From Micro-interactions to Page Transitions
Create smooth, performant animations using modern CSS techniques including @keyframes, transitions, and CSS variables.
Mar 29, 20266 min read7,100 views890 words
The CSS Animation Model
CSS
| 1 | @keyframes slideIn { |
| 2 | from { |
| 3 | opacity: 0; |
| 4 | transform: translateY(-10px); |
| 5 | } |
| 6 | to { |
| 7 | opacity: 1; |
| 8 | transform: translateY(0); |
| 9 | } |
| 10 | } |
| 11 | |
| 12 | .card { |
| 13 | animation: slideIn 300ms ease-out forwards; |
| 14 | } |
Using View Transitions API
The new View Transitions API enables seamless page transitions.