The CSS animation property
Applies a sequence defined by `@keyframes` and combines duration, timing, delay, iteration, direction, and fill behavior in one shorthand.
4,137 effects in the catalog use this property.
Syntax
animation: <name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode>;Watch out
Without `forwards`, an element returns to its pre-animation styles when the animation ends. Entrance animations often need this fill mode to retain the final state.
Common values
pulse 2s ease-in-out infinite- Infinite pulsing animation
slide .4s ease forwards- Keeps the final keyframe after the animation ends
Effects using animation
All CSS propertiesThese are working effects from the catalog. Open a tile to inspect the full source.