Animation Utilities

🎞️ Animation Utilities

📐 What are animation utilities used for?

Animation utilities let you assign predefined animation keyframes, directions, speeds and repetition rules directly in your HTML using small helper classes.

They allow rapid prototyping and consistent transitions across the entire design system, without writing custom CSS for each animated element.

💠 Examples

Hover each box to play the animation.

.anim-shake-x
.anim-medium

.anim-shake-y
.anim-medium

.anim-rotate
.anim-medium

.anim-fade-in
.anim-medium

.anim-fade-out
.anim-medium

.anim-grow-in
.anim-medium

.anim-shrink-in
.anim-medium

.anim-slide-top-in
.anim-medium

.anim-slide-bottom-in
.anim-medium

.anim-slide-left-in
.anim-medium

.anim-slide-right-in
.anim-medium

.anim-slide-top-out
.anim-medium

.anim-slide-bottom-out
.anim-medium

.anim-slide-left-out
.anim-medium

.anim-slide-right-out
.anim-medium

.anim-rotate
.anim-fast

.anim-rotate
.anim-medium

.anim-rotate
.anim-slow

.anim-rotate
.anim-medium
.anim-reverse

💻 HTML Code

Shake X (.anim-shake-x)

Shake Y (.anim-shake-y)

Rotate (.anim-rotate)

Fade In (.anim-fade-in)

Fade Out (.anim-fade-out)

Grow In (.anim-grow-in)

Shrink In (.anim-shrink-in)

Slide Top In (.anim-slide-top-in)

Slide Bottom In (.anim-slide-bottom-in)

Slide Left In (.anim-slide-left-in)

Slide Right In (.anim-slide-right-in)

Slide Top Out (.anim-slide-top-out)

Slide Bottom Out (.anim-slide-bottom-out)

Slide Left Out (.anim-slide-left-out)

Slide Right Out (.anim-slide-right-out)

Reverse direction (.anim-reverse)

Repeat forever (.anim-infinite)

Fast speed (.anim-fast)

Medium speed (.anim-medium)

Slow speed (.anim-slow)

🛠️ How to Use

To apply an animation, you always need at least two classes:

1 — Choose an animation (ex: .anim-shake-x)
2 — Choose a speed (ex: .anim-medium)

The animation class only defines the keyframes, and the speed class defines the duration. Both are required for the animation to be visible.

🔁 Play animation on hover like the examples

To use animations the same way they are shown in the examples, simply add data-anim-hover with the animation and speed you want to replay on hover.

<div data-anim-hover="anim-shake-x anim-medium">
    Hover me
</div>

Add this script to enable hover replay:

document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('[data-anim-hover]').forEach(element => {
        const animClasses = element.dataset.animHover.split(" ");
        let isPlaying = false;

        element.addEventListener('mouseenter', () => {
            if (isPlaying) return;
            isPlaying = true;

            animClasses.forEach(cls => element.classList.remove(cls));
            void element.offsetWidth;
            animClasses.forEach(cls => element.classList.add(cls));
        });
        element.addEventListener('animationend', () => {
            isPlaying = false;
        });
    });
})

📏 Animation Utilities Overview

These utilities map directly to animation names, directions, durations and iteration counts.

.anim-shake-x

Applies the animation-name associated with anim-shake-x.

.anim-shake-y

Applies the animation-name associated with anim-shake-y.

.anim-rotate

Applies the animation-name associated with anim-rotate.

.anim-fade-in

Applies the animation-name associated with anim-fade-in.

.anim-fade-out

Applies the animation-name associated with anim-fade-out.

.anim-grow-in

Applies the animation-name associated with anim-grow-in.

.anim-shrink-in

Applies the animation-name associated with anim-shrink-in.

.anim-slide-top-in

Applies the animation-name associated with anim-slide-top-in.

.anim-slide-bottom-in

Applies the animation-name associated with anim-slide-bottom-in.

.anim-slide-left-in

Applies the animation-name associated with anim-slide-left-in.

.anim-slide-right-in

Applies the animation-name associated with anim-slide-right-in.

.anim-slide-top-out

Applies the animation-name associated with anim-slide-top-out.

.anim-slide-bottom-out

Applies the animation-name associated with anim-slide-bottom-out.

.anim-slide-left-out

Applies the animation-name associated with anim-slide-left-out.

.anim-slide-right-out

Applies the animation-name associated with anim-slide-right-out.

.anim-reverse