Transforms

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

Scale

Scale up (small)
Scale down (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 (0.35s)

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 0.7s 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 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

The image stays changed because of animation-fill-mode: forwards.

Fill mode: forwards

Animation Direction & Iteration

This shows infinite and alternate.

Infinite + alternate

Reveal Effect (Flashcard Preparation)

This is a real flashcard example — the definition is hidden and revealed on hover.

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