Every CSS animation pattern you'll ever need — fades, slides, bounces, text effects, loaders and backgrounds. Click any preview to replay. Copy the code instantly.
CSS animations use @keyframes to define states, then animation properties to apply them: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count and animation-fill-mode.
Transitions trigger on state changes (hover, focus, class toggle) and animate between two values. Animations use @keyframes to run automatically, loop, and define multiple intermediate steps. Use transitions for hover effects and animations for looping or auto-playing effects.
Set animation-iteration-count: infinite. Example: .el { animation: spin 1s linear infinite; } Use animation-direction: alternate to reverse on each loop for a ping-pong effect.
Use the animation-delay property. Example: .el { animation: fadeIn 0.5s ease 0.3s forwards; } For staggered children, increment the delay: :nth-child(1) { animation-delay: 0s } :nth-child(2) { animation-delay: 0.1s } etc.
animation-fill-mode: forwards keeps the element in the final keyframe state after the animation ends. Without it, the element snaps back to its original CSS. Always use forwards for entrance animations (fade in, slide in) so the element stays visible.