Transforms

Each transform has a “small” example and a “big / opposite” example.

Scale

Scale down (small)
Scale up (big)

Rotate

Rotate small
Rotate big (2 spins)

Skew

Skew small
Skew big

Translate

Translate small
Translate big (other direction)

Transitions

Same hover transform, different timing settings.

Ease
Linear
Delay

Transition timing-function options

All boxes do the same hover transform. Only the timing function changes.

ease
linear
ease-in
ease-out
ease-in-out

Transition property options

Hover both. One animates only transform, the other animates transform + border-radius.

transition: transform
transition: all

Animations

Animations run automatically (no hover needed).

Spin once (on load)

Animation fill-mode options (delay included so you can see the difference)

Watch the first moment before the animation starts, then watch after it finishes.

fill-mode: none
fill-mode: forwards
fill-mode: backwards
fill-mode: both

Animation direction options

Alternate options should run twice so you can see the back-and-forth.

direction: normal
direction: reverse
direction: alternate
direction: alternate-reverse

Iteration examples

iteration-count: 1
iteration-count: infinite

Play-state example

This one is paused. Hover it to start it.

play-state: paused → running (on hover)

Opacity (used for reveals)

This is a common “reveal” tool for the flashcard assignment.

Opacity hover

Animation Fill Mode

This section is a reminder example.

Fill mode example

Animation Direction & Iteration

This section is a reminder example.

Direction + iteration example

Reveal Effect (Flashcard Preparation)

This is a real flashcard example — the definition should reveal on hover.

Transition
A CSS feature that smoothly changes property values over time (like transform or opacity) instead of changing instantly.