Transitions and Transformations

Create smooth UI interactions using transitions, transforms, timing functions, and compositing-friendly animation properties.

CSS Transitions

Transitions interpolate property changes over time. A transition typically specifies the property, duration, timing function, and optional delay.

Transitions work when a property has a different computed value before and after a state change.

CSS Transition

Button Transition

.button {
  background: #2563eb;
  transition:
    background-color 180ms ease,
    transform 180ms ease;
}

.button:hover {
  background: #1d4ed8;
  transform: translateY(-2px);
}

💡 The browser interpolates the supported property changes over 180 milliseconds.

Key Takeaways

Transitions smooth state changes.
Transition only the properties that need animation.

Knowledge Check

What does a CSS transition primarily do?

Transform

The transform property can translate, scale, rotate, or skew an element without changing normal document flow in the same way as layout properties. Transform functions can be composed.

Transforms are commonly used for visual movement because they can often be handled efficiently by browser rendering pipelines.

Transform Without Reflow

Transform Functions

.card:hover {
  transform: translateY(-6px) scale(1.01);
}

.icon {
  transform: rotate(45deg);
}

💡 Multiple transform functions can be combined in a single transform declaration.

Key Takeaways

Transforms visually modify an element without normal-flow repositioning.
Translate and scale are common interaction effects.

Knowledge Check

Which property is commonly used for visual movement without changing normal layout geometry?

Timing Functions

Timing functions control the rate at which an animation progresses. Common keywords include linear, ease, ease-in, ease-out, and ease-in-out. Custom cubic Bézier curves can provide more precise motion.

Good motion usually has a purpose: communicating state, hierarchy, or spatial relationships.

Animation Timing Curves

Custom Timing

.panel {
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

💡 The cubic Bézier curve defines how quickly the animation progresses through its duration.

Key Takeaways

Timing functions control animation pacing.
Use motion to communicate interaction rather than decoration alone.

Knowledge Check

What does a timing function control?

CSS Transitions

Transform

Timing Functions

STAY UPDATED WITH BYTES!