CSS Animations

CSS animations allow an element’s appearance to gradually change, such as color, size, position, or opacity. Animations are essential for creating modern, dynamic websites.

Simple animation with @keyframes

The @keyframes rule defines the steps of an animation. We can specify how an element changes from the initial to the final state.

In this example, a box’s background color changes from red to yellow and back again with infinite repetition.

Animation properties

Animations can be controlled with several sub-properties. Some of these include the name, duration, timing function, delay, and number of iterations.

Property	Description
animation-name	Specifies which @keyframes animation to use for the element.
animation-duration	The duration of the animation in seconds or milliseconds.
animation-timing-function	The timing function of the animation (e.g., ease, linear, ease-in, ease-out).
animation-delay	How long to wait before the animation starts.
animation-iteration-count	How many times the animation should repeat (for example, it can be infinite).
animation-direction	The direction of the animation (e.g., normal, reverse, alternate).

Tips for CSS animations

The following tips will help you make animations not only visually appealing but also efficient:

Use animations in moderation: too much motion can be distracting.
Animate performance-friendly properties (e.g., transform, opacity) rather than layout-affecting ones (e.g., width, height).
Combine animations and transitions for a more natural effect.