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)

Animations

Animations run automatically (no hover needed).

Spin once (on load)

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.