Trending Now

Smooth UI Changes with CSS Transitions: 10 Code-Along Examples

July 12, 2026

7 min read

Python Functions: 10 Code-Along Examples

July 12, 2026

7 min read

DATALAD ™

Andrei

July 12, 2026

1 min read

CSS Transitions Cheatsheet

A one-page CSS transitions reference, every snippet explained line by line: the base-state rule, longhand properties, timing functions, delays and staggering, per-property timing, the transform pairing, and reduced motion.

A transition animates between two states: a base state, a triggered state like hover, and one line telling the browser to travel between them smoothly. This cheatsheet gathers the whole toolkit on one page, from the four longhand properties to staggering, per-property timing, and the reduced-motion guard, each snippet annotated line by line. Keep it open while you code, or save the image and pin it nearby.

For the full background, read the guide to smooth UI changes with CSS transitions. To practise, work through the 10 code-along examples.

Download the cheatsheet

CSS_transition Download

See you soon.

Andrei

July 12, 2026

1 min read

View Comments (1)

Organising Stylesheets with SCSS Partials

Using SCSS partials allows developers to organise stylesheets into smaller, focused files, facilitating easier navigation, maintenance, and collaboration. This modularity enhances code management while still producing a single compiled CSS file.

June 23, 2026

3 min read

Generating CSS at Scale with SCSS Loops

SCSS loops simplify repetitive CSS tasks by allowing the creation of multiple rules from a single definition. They include @for for numeric sequences, @each for lists or maps, and @while for control over iteration, enhancing stylesheet efficiency.

June 23, 2026

4 min read