CSS · Chapter 35 of 44
CSS Animations
CSS animations use @keyframes to define styles at various points, then apply them with the animation property, allowing multi-step animations without JavaScript.
Key properties include animation-duration, animation-timing-function, animation-iteration-count, and animation-direction.
Syntax
@keyframes name {
from { }
to { }
}
animation: name duration;Defining keyframes
@keyframes name { 0% {...} 100% {...} } describes how styles change over the animation's duration, using percentage or from/to steps.
Applying the animation
animation: name duration timing-function iteration-count; runs the keyframes. infinite repeats forever; alternate reverses direction each cycle.
Example 1 (css)
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.icon {
animation: pulse 2s infinite;
}Output
The icon gently pulses larger and smaller forever, in a 2-second loopThe keyframes describe the pulse effect, and the animation property runs it infinitely.
Key points
- @keyframes defines the steps of an animation.
- animation-duration sets how long one cycle takes.
- animation-iteration-count controls repeats (a number or infinite).
- animation-direction can alternate between forward and reverse.
💡 Note: CSS animations run independently of JavaScript, which helps performance for simple effects.