CSS Animations - Reference

What are CSS Animations?

CSS animations let you animate transitions from one CSS style to another. Unlike transitions which only animate between two states, animations can have multiple intermediate steps using keyframes, giving you precise control over the animation sequence.

Key Advantage: Hardware-accelerated, declarative, and doesn't require JavaScript for basic animations.

@keyframes

Defines the animation sequence with intermediate steps.

                @keyframes slidein {

                  from { transform: translateX(-100%); }

                  to { transform: translateX(0); }

                }

Syntax: Define named animation with from/to or percentage steps

Percentage method: 0%, 50%, 100% for multiple steps

animation-name

Applies a named keyframe animation to an element.

.element { animation-name: slidein; }

Value: Name of the @keyframes animation

Required: Must match a defined @keyframes name

animation-duration

Sets how long the animation takes to complete one cycle.

.element { animation-duration: 2s; }

Values: Seconds (s) or milliseconds (ms)

Default: 0s (no animation without this!)

animation-timing-function

Controls the speed curve of the animation.

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

Common values: linear, ease, ease-in, ease-out, ease-in-out

Custom: cubic-bezier(0.1, 0.7, 1.0, 0.1)

Effect: Changes acceleration/deceleration pattern

animation-iteration-count

Defines how many times the animation runs.

                .element { animation-iteration-count: 3; }

                .element { animation-iteration-count: infinite; }

Number: Runs that many times

infinite: Runs forever

animation-direction

Sets whether the animation plays forward, backward, or alternates.

.element { animation-direction: alternate; }

normal: Forward each time (default)

reverse: Backward each time

alternate: Forward, then backward, then forward...

alternate-reverse: Backward, then forward, then backward...

animation Shorthand

Combine all animation properties in one declaration.

animation: slidein 2s ease-in-out 1s infinite alternate;

Order: name duration timing-function delay iteration-count direction

Minimum: name and duration

animation-delay

Delays the start of the animation.

.element { animation-delay: 1s; }

Positive values: Wait before starting

Negative values: Start partway through the animation