Animation

Pre-built animation tokens combining keyframes with easing and duration. Apply via the animation property.

Entrance & exit

--animation-fade-in

--animation-fade-out

--animation-scale-up

--animation-scale-down

--animation-slide-in-up

--animation-slide-in-down

--animation-slide-in-left

--animation-slide-in-right

--animation-slide-out-up

--animation-slide-out-down

--animation-slide-out-left

--animation-slide-out-right

Looping

--animation-spin

--animation-ping

--animation-blink

--animation-float

--animation-bounce

--animation-pulse

Feedback

--animation-shake-x

--animation-shake-y

--animation-shake-z

Usage

.notification {
  animation: var(--animation-slide-in-right);
}

.spinner {
  animation: var(--animation-spin);
}

.error-field {
  animation: var(--animation-shake-x);
}