Search pages
Search all CSS Showcase pages by name
CSS Animations
Bring your designs to life with smooth, performant animations. Master keyframe sequences, timing functions, and creative effects that captivate your users.
Keyframe Basics
Keyframes define the stages of your animation. Create complex motion by specifying styles at various points during the animation sequence.
Animation Properties
Control every aspect of your animations with these powerful properties.
Understanding Fill Modes
- none: Element returns to its original state before/after the animation
- forwards: Element retains the styles from the last keyframe
- backwards: Element applies styles from the first keyframe during the delay period
- both: Combines forwards and backwards — the most common choice
Hover over the element to pause its animation
Creative Effects
Combine animations to create stunning visual effects that captivate your users.
Hello, World!
Front Side
Hover to flip
Back Side
Hidden content!
Hover over the card to see the 3D flip effect
Performance & Best Practices
Writing animations that look great and perform well requires understanding what happens under the hood.
Key Principles
Stick to transform and opacity — these properties are composited on the GPU and won't trigger layout recalculations. Animating width, height, top, or left forces the browser to recalculate layout on every frame.
Use will-change sparingly — it hints the browser to optimise, but overuse wastes memory. Only apply it to elements that will actually animate.
Respect prefers-reduced-motion — always provide a reduced-motion alternative. Some users experience motion sickness from animations. Use @media (prefers-reduced-motion: reduce) to disable or simplify animations.
Animation Lab
Experiment with animation presets, adjust duration and easing in real time, and watch the progress timeline visualise each keyframe cycle.
Classic bounce using translateY at 0%, 50%, and 100%
.element {
animation: bounce 1.0s ease-in-out infinite;
}Continue Your Journey
Animations mastered! Explore filters for visual effects, or revisit transitions for state-based animation.