Chapter 20: CSS Transitions and Animations

Basic Transition

Hover to see size, color, and rotation change smoothly:

Transition with Delay

Hover to move right, but it starts after 1 second delay:

Transition Timing Functions

Hover each track to see the different timing functions in action:

Ease: (default - slow start, fast, slow end)

Linear: (same speed from start to end)

Ease-in: (slow start, fast end)

Ease-out: (fast start, slow end)

Ease-in-out: (slow start and end)

Two-step Animation

Box moves right and changes color continuously:

Multiple Keyframes Animation

Box changes position and color at multiple steps:

Animation with Delay & Iteration

Starts after 1s, runs continuously:

Animation Direction

Reverse direction (runs backwards):

Alternate back and forth:

Animation Timing Function

Ease-in-out movement during animation:

Shorthand Animation Property

Using shorthand syntax: