CSS Animations

David Khourshid @davidkpiano

Fundamentals

Why animate?

Style and branding.

Guidance and clarification.

Fundamentals

Duration

How long an iteration of an animation takes to complete.

0s

1s

2s

Fundamentals

Delay

How long it takes before an animation starts

0s

0.5s

1.5s

Fundamentals

Timing function

The easing of an animation.

cubic-bezier(0.5, 0, 0.5, 1)

Fundamentals

CSS Variables

Also known as CSS Custom Properties

:root {
  --duration: 2s;
}

.thing {
  animation-duration: calc(var(--duration, 1s));
}
const thingEl = document.querySelector('.thing');

thingEl.style.setProperty('--color', 'green');

Fundamentals

What to animate

✅ Transform and opacity

👍 Color and background

❌ Height, width, left, right, etc.

Transitions

Animations

Choreography

States

Layout animations

Reactive animations

Frontend Masters CSS Animations Workshop

By David Khourshid

Frontend Masters CSS Animations Workshop

  • 255