CSS Animations

CSS Animations allow you to animate transitions from one CSS style configuration to another. Unlike Transitions, which triggered by a state change (like hover), Animations can run automatically and loop infinitely.

The @keyframes Rule

To use CSS animation, you must first define some keyframes for the animation. Keyframes hold the style definitions for specific points in the animation timeline.

@keyframes example {
    from { background-color: red; }
    to { background-color: yellow; }
}

/* Or using percentages for more steps */
@keyframes multicolor {
    0% { background-color: red; }
    50% { background-color: blue; }
    100% { background-color: red; }
}

Interactive Animation Demos

Core Animation Properties

• animation-name: The name of the @keyframes rule you want to use.
• animation-duration: How long the animation takes to complete (e.g. 2s).
• animation-timing-function: The speed curve (e.g. ease, linear).
• animation-iteration-count: How many times to play (e.g. 3, infinite).
• animation-direction: Whether to play forwards, backwards, or in alternate cycles.

The Shorthand Syntax

.box {
    /* name duration timing-function delay iteration direction fill-mode */
    animation: bounce 2s ease-in-out infinite;
}