Transitions in CSS

Interpolating a property change over time, on the cheap properties only.

.button {
  transition: background-color 150ms ease-out,
              transform 150ms ease-out;
}

.button:hover {
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(0);
}

.panel {
  transition: opacity 200ms ease, visibility 200ms;
}

How it works

1. Name the properties rather than using all.
2. transform and opacity animate without relayout.
3. A short duration and an ease-out curve feel responsive.

Keywords and builtins used here

• button
• ms
• opacity
• panel
• px
• transform
• transition
• translateY
• visibility

The run, in numbers

Lines

16

Characters to type

238

Tokens

58

Three-star pace

90 tpm

At the three-star pace of 90 tokens a minute, this run takes about 39 seconds.

Type this snippet

Step 1 of 8 in Motion & effects, step 11 of 21 in Responsive & modern CSS.

← Previous Next →