CSS Animation Runner

Allows you to define chained animation logic using only CSS class naming: start-animation-foo then-animation-bar

<div class="rows">
    <div class="row start-animation-fadein some-irrelevant-class then-animation-grow-40"></div>
    <div class="row start-animation-fadein then-animation-grow-80 start-animation-grow-60 start-animation-grow-40 then-animation-blink"></div>
    <div class="row"></div>
    <div class="row start-animation-grow-60 start-animation-grow-40"></div>
    <div class="row animation-fadein"></div>
    <div class="row start-animation-grow-60 start-animation-grow-40 start-animation-grow-60"></div>
</div>

The script walks the DOM tree, finds elements that contain specific token-prefixed classes, and runs a CSS-driven animation queue on each element in its own isolated state, waiting for every animation step to finish before running the next one.

Usage:

CSS

Create CSS classes for your animations, they all should be prefixed .animation- e.g. .animation-fadein

HTML

Apply classes to an element starting the sequence with any of your existing classes with a start- prefix and using the prefix then- to define all the following steps.

Example:

Suppose you have a CSS class .animation-fadein.

<div class="start-animation-fadein then-animation-expand then-animation-blink"></div>

JS

Call runAnimationQueue(HTMLElement) after the DOM has loaded.

import runAnimationQueue from './animation-runner.js';

runAnimationQueue(document.body);

Example:

<div class="start-animation-fadein then-animation-expand then-animation-blink"></div>

This will run the animations in order:

1. animation-fadein
2. animation-expand
3. animation-blink

Token rules:

• start- always begins a new animation sequence.
• then- starts a new animation step after the previous one finishes.

Feel free to contribute to the project and add your own tokens and parsing logic!

Infinite animation handling:

Infinite animation handling is controlled by CONFIG.skipInfiniteAnimations

if true, infinite animations are skipped (duration === 0);

if false, infinite animations use CONFIG.virtualInfiniteDuration