Vanilla has a cross matrix of duration and easing that can be used to apply animation to components.


Vanilla uses a range of animation durations to dictate the time in which an animation should complete. These values are stored within a map named $animation-duration.

Components that animate statically, like a button that changes background color, tend to have a shorter duration than components with motion animation.

Setting Default value
snap .1s
fast .165s
brisk .333s
slow .5s
sleepy 1s


Vanilla's easing can be easeInCubic or easeOutCubic.

Setting Default value
out cubic-bezier(.215, .61, .355, 1)
in cubic-bezier(.55, .055, .675, .19)


Animations are preset to components. Components can be modified or extended to include animation by including the animation mixin.

@include animation(property: all, duration: brisk, easing: out);