Build CSS @keyframes animations visually — choose from 20+ presets, customize timing, easing and iteration count, then copy the complete CSS instantly.
CSS animations use @keyframes to define intermediate states and the animation shorthand to apply them. Unlike transitions, animations run automatically without requiring a state change — they can loop, alternate direction and have delays. The easing function applies within each keyframe interval, not across the full animation. For performance, stick to animating transform and opacity — these run on the compositor thread and don't trigger layout. The animation-fill-mode: forwards keeps the element in its final keyframe state after the animation ends. Use prefers-reduced-motion media query to disable or simplify animations for users who have requested less motion in their OS accessibility settings.