Motion

CSS transitions allows you to change property values smoothly (from one value to another), over a given duration. Speed is how fast or slow an element moves or changes. Easing explains how the element moves or changes through a given path.

Dim Sum provides a predictable scale for motion with semantic meaning.

Speed

Easing

Usage in Code

We make use of Sass functions specify the transition bezier and timing we want to apply to objects as they transition from one state to another one.

easing($variant: base)

Applies a timing to a CSS property. $variant refers to the speed or duration in which you need the element to transition. If used but no value is passed as a parameter, it defaults to base.

duration($variant: base)

Applies a cubic-bezier to a CSS property. $variant refers to how you need that element to transition. If used but no value is passed as a parameter, it defaults to base.

.div-container {
transition: duration(slowest) easing(overshoot); // the first one returns a number in ms units, and the second one returns a cubic-bezier.
}