CSS Animations Introduction
CSS Animations make it easy to animate HTML elements without using JavaScript.
CSS animations allow an element to gradually change from one style to another. You can change as many CSS properties as you want, as many times as you want.
To use CSS animation, you first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times. Next, you bind the animation to a selector by specifying the animation name (which matches the keyframes element) and its duration.
Two Main Components
There are two required components when creating a CSS animation:
- The
@keyframesrule, containing the individual waypoints of the animation. - The animation properties, applied to the element you want to animate.
Here's a quick example to show an animation in action. We define a simple fade-in effect using @keyframes and apply it to a div element.
Don't worry if this syntax looks new. We will cover the @keyframes rule and all the animation properties in detail over the next few pages!