Transition mixins

Transition utilities: property, duration, easing and delay.

Classes:

transition: Sets transition-property to all with the default duration and easing tokens ($transition-default-duration, $transition-default-ease); the defaults sit in :where(), so .duration-{time} and .ease-{type} override them in any order
transition-{property}: Transition specific properties (none, colors, opacity, shadow, transform); colors, opacity, shadow and transform get the same :where() defaults as .transition
duration-{time}: Set transition duration
ease-{type}: Set transition timing function
delay-{time}: Set transition delay

Responsive: every class supports the @breakpoint suffix.

The property groups combine: transition-colors, transition-opacity, transition-shadow and transition-transform each set a non-inheriting --wu-transition-{group} variable and all write one transition-property list of every group, so class="transition-colors transition-transform" transitions both. An unset group falls back to --wu-none, a name nothing animates, so the computed transition-property lists it in place of each unset group.

Precedence: .transition (all) and .transition-none come before the group classes, so a group class on the same element replaces them; in apply() the last of transition, transition-none and a group mixin decides, and group mixins combine with each other.

Generated from the doc blocks in the core source when the site is built, so it always matches the current release of @wovenui/core. Every example is compiled against core during the build; open Compiled CSSunder an example to see its output. Guide: Transitions. The A to Z index lists every public mixin and function.

Source: utilities/_transitions.scss

Mixins

transition-none transition transition-colors transition-opacity transition-shadow transition-transform duration ease ease-linear ease-in ease-out ease-in-out delay

`transition-none` mixin

Disables transitions by setting transition-property to none.

In apply(), the last of transition-none, transition and a property group mixin decides; the transition-none class is replaced by a property group class on the same element.

@mixin transition-none

Example

.no-motion {
  @include transition-none;
}

Compiled CSS

.no-motion {
  transition-property: none;
}

transition-property on MDN

See also: duration, ease, delay. Source: utilities/_transitions.scss:44

`transition` mixin

Transitions every animatable property with the default duration and easing tokens ($transition-default-duration, 200; $transition-default-ease, in-out).

Include duration() or ease() after it to override a default.

The transition class is replaced by a property group class (transition-colors, transition-opacity, transition-shadow, transition-transform) on the same element; in apply() the last of them decides.

@mixin transition

Output: transition-property: all; transition-duration: var(--wu-duration-200); transition-timing-function: var(--wu-ease-in-out)

Example 1

.card {
  @include transition;
}

Compiled CSS

.card {
  transition-property: all;
  transition-duration: var(--wu-duration-200);
  transition-timing-function: var(--wu-ease-in-out);
}

Example 2

.panel {
  @include apply(transition, duration(300));
}

Compiled CSS

.panel {
  transition-property: all;
  transition-duration: var(--wu-duration-200);
  transition-timing-function: var(--wu-ease-in-out);
  transition-duration: var(--wu-duration-300);
}

See also: duration, ease, delay. Source: utilities/_transitions.scss:65

`transition-colors` mixin

Transitions color properties (color, background-color, border-color, text-decoration-color, fill, stroke) with the default duration and easing tokens, like transition.

Combines with the other property groups (transition-opacity, transition-shadow, transition-transform) on the same element.

@mixin transition-colors

Output: --wu-transition-colors: color, background-color, ...; transition-property: var(--wu-transition-colors, --wu-none), ... for every group; default duration and easing

Example

.button {
  @include apply(transition-colors, duration(150), ease(out));
}

Compiled CSS

.button {
  --wu-transition-colors: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: var(--wu-transition-colors, --wu-none), var(--wu-transition-opacity, --wu-none), var(--wu-transition-shadow, --wu-none), var(--wu-transition-transform, --wu-none);
  transition-duration: var(--wu-duration-200);
  transition-timing-function: var(--wu-ease-in-out);
  transition-duration: var(--wu-duration-150);
  transition-timing-function: var(--wu-ease-out);
}

See also: duration, ease, delay. Source: utilities/_transitions.scss:120

`transition-opacity` mixin

Transitions opacity, with the default duration and easing tokens, like transition.

Combines with the other property groups (transition-colors, transition-shadow, transition-transform) on the same element.

@mixin transition-opacity

Output: --wu-transition-opacity: opacity; transition-property: var(--wu-transition-colors, --wu-none), ... for every group; default duration and easing

Example

.button {
  @include apply(transition-opacity, duration(150), ease(out));
}

Compiled CSS

.button {
  --wu-transition-opacity: opacity;
  transition-property: var(--wu-transition-colors, --wu-none), var(--wu-transition-opacity, --wu-none), var(--wu-transition-shadow, --wu-none), var(--wu-transition-transform, --wu-none);
  transition-duration: var(--wu-duration-200);
  transition-timing-function: var(--wu-ease-in-out);
  transition-duration: var(--wu-duration-150);
  transition-timing-function: var(--wu-ease-out);
}

See also: duration, ease, delay. Source: utilities/_transitions.scss:137

`transition-shadow` mixin

Transitions box-shadow, with the default duration and easing tokens, like transition.

Combines with the other property groups (transition-colors, transition-opacity, transition-transform) on the same element.

@mixin transition-shadow

Output: --wu-transition-shadow: box-shadow; transition-property: var(--wu-transition-colors, --wu-none), ... for every group; default duration and easing

Example

.button {
  @include apply(transition-shadow, duration(150), ease(out));
}

Compiled CSS

.button {
  --wu-transition-shadow: box-shadow;
  transition-property: var(--wu-transition-colors, --wu-none), var(--wu-transition-opacity, --wu-none), var(--wu-transition-shadow, --wu-none), var(--wu-transition-transform, --wu-none);
  transition-duration: var(--wu-duration-200);
  transition-timing-function: var(--wu-ease-in-out);
  transition-duration: var(--wu-duration-150);
  transition-timing-function: var(--wu-ease-out);
}

See also: duration, ease, delay. Source: utilities/_transitions.scss:154

`transition-transform` mixin

Transitions transform, with the default duration and easing tokens, like transition.

Combines with the other property groups (transition-colors, transition-opacity, transition-shadow) on the same element.

@mixin transition-transform

Output: --wu-transition-transform: transform; transition-property: var(--wu-transition-colors, --wu-none), ... for every group; default duration and easing

Example 1

.button {
  @include apply(transition-transform, duration(150), ease(out));
}

Compiled CSS

.button {
  --wu-transition-transform: transform;
  transition-property: var(--wu-transition-colors, --wu-none), var(--wu-transition-opacity, --wu-none), var(--wu-transition-shadow, --wu-none), var(--wu-transition-transform, --wu-none);
  transition-duration: var(--wu-duration-200);
  transition-timing-function: var(--wu-ease-in-out);
  transition-duration: var(--wu-duration-150);
  transition-timing-function: var(--wu-ease-out);
}

Example 2

.card {
  @include apply(transition-colors, transition-transform); // both groups transition
}

Compiled CSS

.card {
  --wu-transition-colors: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-property: var(--wu-transition-colors, --wu-none), var(--wu-transition-opacity, --wu-none), var(--wu-transition-shadow, --wu-none), var(--wu-transition-transform, --wu-none);
  transition-duration: var(--wu-duration-200);
  transition-timing-function: var(--wu-ease-in-out);
  --wu-transition-transform: transform;
  transition-property: var(--wu-transition-colors, --wu-none), var(--wu-transition-opacity, --wu-none), var(--wu-transition-shadow, --wu-none), var(--wu-transition-transform, --wu-none);
  transition-duration: var(--wu-duration-200);
  transition-timing-function: var(--wu-ease-in-out);
}

See also: duration, ease, delay. Source: utilities/_transitions.scss:175

`duration` mixin

Sets transition-duration from a $durations key, emitted as var(--wu-duration-*), or a raw time.

A unitless number that is not a key, a negative time, or a time in another unit raises an error.

@mixin duration($time)

Parameter	Type	Default	Description
`$time`	`Number\|Duration\|String`	Required	A $durations key (0, 75, 100, 150, 200, 300, 500, 700, 1000), a time in s or ms, calc() or var()

Example 1

.panel {
  @include duration(300); // var(--wu-duration-300)
}

Compiled CSS

.panel {
  transition-duration: var(--wu-duration-300);
}

Example 2

.toast {
  @include apply(transition-opacity, duration(250ms));
}

Compiled CSS

.toast {
  --wu-transition-opacity: opacity;
  transition-property: var(--wu-transition-colors, --wu-none), var(--wu-transition-opacity, --wu-none), var(--wu-transition-shadow, --wu-none), var(--wu-transition-transform, --wu-none);
  transition-duration: var(--wu-duration-200);
  transition-timing-function: var(--wu-ease-in-out);
  transition-duration: 250ms;
}

transition-duration on MDN

See also: ease, delay. Source: utilities/_transitions.scss:218

`ease` mixin

Sets transition-timing-function from a $timing-functions key, emitted as var(--wu-ease-*), or a raw timing function.

Keys win over keywords, so ease(linear) gives var(--wu-ease-linear); any other value raises an error.

@mixin ease($name)

Parameter	Type	Default	Description
`$name`	`String`	Required	A $timing-functions key (linear, in, out, in-out), cubic-bezier(), steps(), linear(), var() or a CSS keyword (ease, ease-in, ease-out, ease-in-out, step-start, step-end)

Example 1

.menu {
  @include ease(out); // var(--wu-ease-out)
}

Compiled CSS

.menu {
  transition-timing-function: var(--wu-ease-out);
}

Example 2

.sheet {
  @include apply(transition-transform, duration(300), ease(cubic-bezier(0.2, 0, 0, 1)));
}

Compiled CSS

.sheet {
  --wu-transition-transform: transform;
  transition-property: var(--wu-transition-colors, --wu-none), var(--wu-transition-opacity, --wu-none), var(--wu-transition-shadow, --wu-none), var(--wu-transition-transform, --wu-none);
  transition-duration: var(--wu-duration-200);
  transition-timing-function: var(--wu-ease-in-out);
  transition-duration: var(--wu-duration-300);
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

transition-timing-function on MDN

See also: ease-in, ease-out, ease-in-out, ease-linear, duration. Source: utilities/_transitions.scss:279

`ease-linear` mixin

Sets transition-timing-function to the linear key, var(--wu-ease-linear).

@mixin ease-linear

Example

.fade {
  @include apply(transition-opacity, ease-linear);
}

Compiled CSS

.fade {
  --wu-transition-opacity: opacity;
  transition-property: var(--wu-transition-colors, --wu-none), var(--wu-transition-opacity, --wu-none), var(--wu-transition-shadow, --wu-none), var(--wu-transition-transform, --wu-none);
  transition-duration: var(--wu-duration-200);
  transition-timing-function: var(--wu-ease-in-out);
  transition-timing-function: var(--wu-ease-linear);
}

See also: ease. Source: utilities/_transitions.scss:294

`ease-in` mixin

Sets transition-timing-function to the in key, var(--wu-ease-in).

@mixin ease-in

Example

.fade {
  @include apply(transition-opacity, ease-in);
}

Compiled CSS

.fade {
  --wu-transition-opacity: opacity;
  transition-property: var(--wu-transition-colors, --wu-none), var(--wu-transition-opacity, --wu-none), var(--wu-transition-shadow, --wu-none), var(--wu-transition-transform, --wu-none);
  transition-duration: var(--wu-duration-200);
  transition-timing-function: var(--wu-ease-in-out);
  transition-timing-function: var(--wu-ease-in);
}

See also: ease. Source: utilities/_transitions.scss:304

`ease-out` mixin

Sets transition-timing-function to the out key, var(--wu-ease-out).

@mixin ease-out

Example

.fade {
  @include apply(transition-opacity, ease-out);
}

Compiled CSS

.fade {
  --wu-transition-opacity: opacity;
  transition-property: var(--wu-transition-colors, --wu-none), var(--wu-transition-opacity, --wu-none), var(--wu-transition-shadow, --wu-none), var(--wu-transition-transform, --wu-none);
  transition-duration: var(--wu-duration-200);
  transition-timing-function: var(--wu-ease-in-out);
  transition-timing-function: var(--wu-ease-out);
}

See also: ease. Source: utilities/_transitions.scss:314

`ease-in-out` mixin

Sets transition-timing-function to the in-out key, var(--wu-ease-in-out).

@mixin ease-in-out

Example

.fade {
  @include apply(transition-opacity, ease-in-out);
}

Compiled CSS

.fade {
  --wu-transition-opacity: opacity;
  transition-property: var(--wu-transition-colors, --wu-none), var(--wu-transition-opacity, --wu-none), var(--wu-transition-shadow, --wu-none), var(--wu-transition-transform, --wu-none);
  transition-duration: var(--wu-duration-200);
  transition-timing-function: var(--wu-ease-in-out);
  transition-timing-function: var(--wu-ease-in-out);
}

See also: ease. Source: utilities/_transitions.scss:324

`delay` mixin

Sets transition-delay from a $delays key or a raw time; delays are not tokens, so a key gives its configured time.

A unitless number that is not a key raises an error.

@mixin delay($time)

Parameter	Type	Default	Description
`$time`	`Number\|Duration\|String`	Required	A $delays key (0, 75, 100, 150, 200, 300, 500, 700, 1000; 150 gives 150ms), a time in s or ms, calc() or var()

Example

.tooltip {
  @include delay(300); // transition-delay: 300ms
}

Compiled CSS

.tooltip {
  transition-delay: 300ms;
}

transition-delay on MDN

See also: duration. Source: utilities/_transitions.scss:338

Transition mixins

Mixins

transition-none mixin

transition mixin

transition-colors mixin

transition-opacity mixin

transition-shadow mixin

transition-transform mixin

duration mixin

ease mixin

ease-linear mixin

ease-in mixin

ease-out mixin

ease-in-out mixin

delay mixin

`transition-none` mixin

`transition` mixin

`transition-colors` mixin

`transition-opacity` mixin

`transition-shadow` mixin

`transition-transform` mixin

`duration` mixin

`ease` mixin

`ease-linear` mixin

`ease-in` mixin

`ease-out` mixin

`ease-in-out` mixin

`delay` mixin