A loading indicator can show that an action is still underway. With CSS, the @keyframes at-rule defines the important style changes in an animation; the browser fills in the changes between them. A loader can use this to make SVG rectangles shrink and grow while nearby text tells people what is happening. section 3.0 section 3.4.1
Write @keyframes followed by an animation name and a block of steps. Each step gives a progress position and the styles to apply there: 0% is the start, 50% is halfway, and 100% is the end. The keywords from and to can mark the start and end instead. Set animation-name on an element to connect it to the named keyframes. section 3.4.1
Make a rectangle squeeze and expand
@keyframes doScale { from { transform: scaleY(1); } 50% { transform: scaleY(0.2); } to { transform: scaleY(1); } } rect { animation-name: doScale; } The rectangle begins at full height, shrinks halfway through, then returns to full height. Set animation-duration to control how long one run takes, animation-iteration-count to control how many times it runs, and different animation-delay values on the rectangles to stagger their movement. section 3.4.1 section 3.4
Listing 3.6 Example animation
@keyframes changeColor { #1
0% { background: blue } #1
50% { background: yellow } #1
100% { background: red } #1
} #1
@keyframes changeBorderRadius { #2
from { border-radius: 0 } #2
50% { border-radius: 50% } #2
to { border-radius: 0 } #2
} #2
div {
animation-name: changeColor, changeBorderRadius; #3
animation-duration: 3s; #4
animation-iteration-count: 10; #5
}
Compare two named animations: one changes background color at 0%, 50%, and 100%; the other changes border radius using from, 50%, and to. A comma-separated animation-name value applies both. section 3.4.1
Keyframes define the changing styles, while animation properties control when and how often those changes run. For motion that respects user preferences, animations can also be styled conditionally with a prefers-reduced-motion media query. section 3.4 section 3.7
