Introduction to CSS Animations

CSS Animations provide a way to animate changes in CSS properties over time, offering much greater control than CSS Transitions. While transitions are ideal for single-state changes, animations allow you to define multiple intermediate states (keyframes) along an animation sequence, creating more elaborate and continuous motion effects.

Animations are powerful for loading spinners, interactive elements, image slideshows, or even full-page animated backgrounds. They are defined using @keyframes rules and applied to elements using various `animation` properties.

Defining Animations with `@keyframes`

An animation sequence is created by defining an @keyframes rule. This rule contains a set of CSS styles at specific points (keyframes) within the animation sequence.

Each keyframe is defined as a percentage from 0% (the start of the animation) to 100% (the end of the animation). You can define as many intermediate keyframes as you need. Alternatively, you can use the keywords `from` (equivalent to `0%`) and `to` (equivalent to `100%`).

@keyframes slidein {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    50% {
        transform: translateX(20px);
        opacity: 0.5;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

Applying Animations to Elements

Once you define an @keyframes rule, you apply it to an HTML element using various `animation` properties:

`animation-name`

Specifies the name of the @keyframes rule to be applied.

.box {
    animation-name: slidein;
}

`animation-duration`

Sets the total time an animation takes to complete one cycle.

.box {
    animation-duration: 2s;
}

`animation-timing-function`

Defines the speed curve of the animation (e.g., `ease`, `linear`, `cubic-bezier`). Similar to `transition-timing-function`.

.box {
    animation-timing-function: ease-in-out;
}

`animation-delay`

Specifies a delay before the animation starts.

.box {
    animation-delay: 0.5s;
}

`animation-iteration-count`

Determines how many times an animation should play. Can be a number or `infinite`.

.box {
    animation-iteration-count: 3; /* Plays 3 times */
    animation-iteration-count: infinite; /* Loops forever */
}

`animation-direction`

Specifies whether the animation should play forwards, backwards, or alternate direction on each cycle.

• `normal` (default): Plays forward.
• `reverse`: Plays backward.
• `alternate`: Plays forward then backward.
• `alternate-reverse`: Plays backward then forward.

.box {
    animation-direction: alternate;
}

`animation-fill-mode`

Defines how the element's style is applied before and after the animation plays.

• `none` (default): Element returns to its original style.
• `forwards`: Element retains the style from the last keyframe.
• `backwards`: Element applies the style from the first keyframe before the animation starts.
• `both`: Combines `forwards` and `backwards`.

.box {
    animation-fill-mode: forwards;
}

`animation-play-state`

Allows you to pause or resume an animation.

• `running` (default): Animation is playing.
• `paused`: Animation is paused.

.box {
    animation-play-state: paused;
}

The `animation` Shorthand Property

Similar to transitions, all animation properties can be combined into the `animation` shorthand property: `animation: name duration timing-function delay iteration-count direction fill-mode play-state;`

/* Example: Spin a box infinitely */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.spinning-box {
    width: 80px;
    height: 80px;
    background-color: var(--accent-color);
    border-radius: var(--radius-md);
    margin: 20px auto;
    animation: spin 2s linear infinite; /* name duration timing-function iteration-count */
}

Multiple Animations

You can apply multiple animations to a single element by comma-separating the values for each animation property.

/* Example: Fade in while bouncing */
@keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

.animated-element {
    animation: fadein 1s ease-out forwards, bounce 0.8s ease-in-out infinite;
}