HTML & CSS · Quick Reference

Lesson 10 — Transitions & Animations Cheat Sheet

HTML & CSS

In one line: A transition smoothly animates a property when it changes value — usually on :hover or :focus. The syntax is: transition: property duration timing-function delay.

Key Ideas

1The transition Property. A transition smoothly animates a property when it changes value — usually on :hover or :focus. The syntax is: transition: property duration timing-function delay.

2Timing Functions. The timing function controls how speed changes over the duration of a transition or animation. The difference between a cheap-feeling and premium-feeling animation is ...

3The transform Property. transform lets you move, scale, rotate, and skew elements without affecting layout. Unlike changing top or margin, transforms are GPU-accelerated — they're fast and do...

4@keyframes Animations. While transitions react to state changes, @keyframes animations run automatically — on load, on loop, or triggered by a class. You define waypoints (0%, 50%, 100%) and...

5Stagger & Practical Patterns. Some of the most impressive animation effects are simple CSS techniques applied strategically. Staggering delays, hover card lifts, and loading skeletons are patterns ...

Code Examples

/* Single property */
.btn { transition: background-color 0.3s ease; }

/* Multiple properties */
.card {
  transition: transform 0.25s ease,
              box-shadow 0.25s ease,
              opacity 0.2s ease;
}

/* All properties (use sparingly...

/* Built-in keywords */
transition-timing-function: ease;          /* default — slow, fast, slow */
transition-timing-function: ease-in;       /* slow start */
transition-timing-function: ease-out;      /* slow end — feels natural */
transition-timing-f...

/* Translate — move */
transform: translateX(20px);     /* move right */
transform: translateY(-10px);    /* move up */
transform: translate(20px, -10px); /* both axes */

/* Scale */
transform: scale(1.2);   /* 20% bigger */
transform: scale(0.8);  ...