CSS transitions animate property changes over time: transition: all 0.3s ease. Control duration, timing function, and delay. Transitions are ideal for hover effects and state changes.
@keyframes define complex animations: @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }. Apply with animation: fadeIn 0.5s ease forwards.
Performance tip: only animate transform and opacity for GPU-accelerated 60fps animations. Avoid animating width, height, top, or margin.
The will-change property hints to the browser about upcoming animations. Use sparingly — it consumes memory.
Modern CSS features like scroll-driven animations, view transitions API, and @starting-style open new possibilities for scroll-triggered and page-transition animations.