What are CSS Animations?
CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components: a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation's style, as well as possible intermediate waypoints.
This interactive guide will walk you through all the essential properties that give you control over your animations. Use the controls in each section to see the immediate effect on the visual examples.
1. @keyframes and animation-name
The journey begins with @keyframes. This is where you define the animation's behavior. You create a timeline of styles. The animation-name property then links this timeline to the element you want to animate.
2. animation-duration
This property specifies how long an animation should take to complete one cycle. A value of 0s means the animation will happen instantly.
3. animation-delay
Set a delay before the animation begins. You can even use negative values, which will cause the animation to start as if it had already been playing for that amount of time.
4. animation-iteration-count
Define how many times the animation cycle should be repeated. You can use a number or the keyword infinite to make it loop forever.
5. animation-direction
Control whether the animation should play forwards, backwards, or alternate between directions on each cycle. This is especially useful for infinite animations.
6. animation-timing-function
This sets the speed curve of the animation. It defines how an animation progresses over one cycle, allowing you to create acceleration, deceleration, and other complex speed effects.
7. animation-fill-mode
This property configures what values are applied by the animation outside the time it is executing. For example, you can make an element retain the styles from the last keyframe after the animation ends.
none: Default. No styles are applied before or after execution.forwards: The element will retain the style values from the last keyframe.backwards: The element will get the style values from the first keyframe before the animation starts (during the delay).both: The animation will follow the rules for both forwards and backwards.
8. The animation Shorthand Property
Putting it all together! The animation shorthand property combines all the properties you've learned into a single, clean line of code. The order is generally important, though modern browsers are quite flexible. A common, safe order is:
[name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode]
Use the master control panel below to build your own custom animation and see the shorthand property generated for you.