Skip to content
WovenUI

Animation mixins

Animation mixins that emit their own keyframes once, and the animation utility classes.

Classes: .animate-pulse, .animate-spin, .animate-ping, .animate-fade-in, .animate-fade-out, .animate-fade-in-up, .animate-fade-in-down, .animate-shake and .hover-ready.

Responsive variants use the @breakpoint suffix (.animate-spin@md); .hover-ready has none.

Animation options are passed as a map: animate-spin((duration: 2s)). An unknown key raises an error.

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: Animations. The A to Z index lists every public mixin and function.

Source: utilities/_animations.scss

Mixins

ensure-keyframes animate-bounce hover-ready animate-pulse animate-spin animate-ping animate-fade animate-shake

ensure-keyframes mixin

Emits an @keyframes rule with the given name once per compilation, at the root of the stylesheet (outside @media, @supports, @container and @scope, inside any @layer); later calls with the same name emit nothing.

@mixin ensure-keyframes($name)
ParameterTypeDefaultDescription
$nameStringRequiredKeyframes name
Content block
The keyframe selectors and declarations

Example

.toast {
  animation: toast-in 0.3s ease-out;
  @include ensure-keyframes(toast-in) {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}
Compiled CSS
.toast {
  animation: toast-in 0.3s ease-out;
}
@keyframes toast-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Source: utilities/_animations.scss:47

animate-bounce mixin

Sets an animation that moves the element to a horizontal and vertical offset and back, and emits its keyframes once.

@mixin animate-bounce($props: ())
ParameterTypeDefaultDescription
$propsMap()Overrides for vertical (0.5rem), horizontal (0), duration (1s), timing (ease-in-out), iteration (infinite); offsets are lengths, and a unitless number other than 0 raises an error

Example

.scroll-hint {
  @include animate-bounce((vertical: 10px, duration: 2s));
}
Compiled CSS
.scroll-hint {
  animation: anim-bounce-0-10px 2s ease-in-out infinite;
}
@keyframes anim-bounce-0-10px {
  0%, 100% {
    transform: translate(0, 0);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translate(0, 10px);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

animation on MDN

Source: utilities/_animations.scss:99

hover-ready mixin

Adds a transition on all properties with the default duration and easing tokens ($transition-default-duration, $transition-default-ease) so hover changes animate.

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

Example

.card {
  @include hover-ready;
}
Compiled CSS
.card {
  transition-property: all;
  transition-duration: var(--wu-duration-200);
  transition-timing-function: var(--wu-ease-in-out);
}

See also: transition. Source: utilities/_animations.scss:163

animate-pulse mixin

Sets an animation that fades opacity between a maximum and a minimum, and emits its keyframes once.

@mixin animate-pulse($props: ())
ParameterTypeDefaultDescription
$propsMap()Overrides for min-opacity (0.5), max-opacity (1), duration (1s), timing (ease-in-out), iteration (infinite)

Example

.skeleton {
  @include animate-pulse((min-opacity: 0.4, duration: 1.5s));
}
Compiled CSS
.skeleton {
  animation: anim-pulse-40-100 1.5s ease-in-out infinite;
}
@keyframes anim-pulse-40-100 {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

animation on MDN

Source: utilities/_animations.scss:176

animate-spin mixin

Sets a full 360 degree rotation animation (any direction other than normal spins backwards), and emits its keyframes once.

@mixin animate-spin($props: ())
ParameterTypeDefaultDescription
$propsMap()Overrides for direction (normal), duration (1s), timing (linear), iteration (infinite)

Example

.spinner {
  @include animate-spin((duration: 0.8s));
}
Compiled CSS
.spinner {
  animation: anim-spin-normal 0.8s linear infinite;
}
@keyframes anim-spin-normal {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

animation on MDN

Source: utilities/_animations.scss:216

animate-ping mixin

Sets an animation that scales the element up while fading it out, and emits its keyframes once.

@mixin animate-ping($props: ())
ParameterTypeDefaultDescription
$propsMap()Overrides for scale (2), duration (1s), timing (cubic-bezier(0, 0, 0.2, 1)), iteration (infinite)

Example

.status-dot {
  @include animate-ping((scale: 3));
}
Compiled CSS
.status-dot {
  animation: anim-ping-30 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes anim-ping-30 {
  75%, 100% {
    transform: scale(3);
    opacity: 0;
  }
}

animation on MDN

Source: utilities/_animations.scss:257

animate-fade mixin

Sets a fade animation of type in, out, in-up or in-down (the up and down types also slide 20px), and emits its keyframes once; any other type raises an error.

@mixin animate-fade($props: ())
ParameterTypeDefaultDescription
$propsMap()Overrides for type (in), duration (0.5s), timing (ease-in-out), iteration (1 forwards)

Example

.modal {
  @include animate-fade((type: in-up, duration: 0.3s));
}
Compiled CSS
.modal {
  animation: anim-fade-in-up 0.3s ease-in-out 1 forwards;
}
@keyframes anim-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

animation on MDN

Source: utilities/_animations.scss:295

animate-shake mixin

Sets a horizontal shake animation of the given intensity, and emits its keyframes once per intensity and unit (5px and 5rem get separate keyframes).

@mixin animate-shake($props: ())
ParameterTypeDefaultDescription
$propsMap()Overrides for intensity (5px; a length, a unitless number other than 0 raises an error), duration (0.5s), timing (ease-in-out), iteration (1)

Example

.input-invalid {
  @include animate-shake((intensity: 8px));
}
Compiled CSS
.input-invalid {
  animation: anim-shake-8px 0.5s ease-in-out 1;
}
@keyframes anim-shake-8px {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-8px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(8px);
  }
}

animation on MDN

Source: utilities/_animations.scss:365