Docs

Use the CDN in five minutes

Everything in the galleries is a static file on cdn.htmltool.io. Link one file, add one class, and tune it with custom properties. No build step and no JavaScript required.

Packages

Three packages, each pinned to a version so the URLs never change underneath you. Every file is public, served with Access-Control-Allow-Origin: * and cached for a long time.

Animations

v1.0.0

1,510 animations

Entrances, exits, attention seekers, loaders, text effects, hover, 3D and more. One class per animation, timing through --da-* properties.

Browse animations Read the guide README

Patterns

v1.0.0

243 patterns

Seamless backgrounds you recolor with --dp-ink, --dp-paper and --dp-accent. CSS, SVG tiles, a JS generator and a custom element.

Browse patterns Read the guide README

Font Awesome Free

v7.3.1

1,992 icons

Solid, regular and brands SVGs. Use them as images, CSS masks or inline SVG. Attribution is required (CC BY 4.0).

Browse icons Read the guide License

Quick start

The smallest useful thing: one animation on one element. Swap fade-in-up for any slug from the animations gallery.

Step 1 · Link the stylesheet

Each animation has its own file, so you only download what you use.

index.html

<link rel="stylesheet" href="https://cdn.htmltool.io/animations/1.0.0/css/animations/fade-in-up.min.css">

Step 2 · Add the class

The class and the keyframes are both da-<slug>. The animation runs as soon as the element renders.

index.html

<h1 class="da-fade-in-up">Hello</h1>

Step 3 · Tune it with custom properties

Set --da-* properties on the element or any ancestor. No new CSS file, no rebuild.

styles.css

.hero {
  --da-duration: 1.2s;
  --da-delay: 200ms;
  --da-easing: ease-out;
}

Pin the version

The URLs above are pinned to 1.0.0 and cached as immutable. Swap the version for latest to follow releases with a short cache instead.

Pick your flavour

The same 1,510 animations and 243 patterns ship in several formats. Use whichever fits your stack; they all produce the same result.

CDN flavours
Flavour	What you add	Best for
CSS link	`<link rel="stylesheet" href="…/fade-in-up.min.css">`	Any HTML page. Zero tooling.
SCSS / Stylus	`@use "devops-animations/scss/animations/fade-in-up"`	Mixins inside your own build. Download the folder first.
ES module	`animate(el, "fade-in-up", { duration: 900 })`	Starting animations from JavaScript (Web Animations API).
Custom element	`<da-animate name="fade-in-up" trigger="visible">`	Triggers on load, visible, hover or click without writing JS.
Tailwind	`class="animate-da-fade-in-up"`	Tailwind v4 (theme import) or v3 (preset).

Every package also has a full README on the CDN with each flavour in detail:

https://cdn.htmltool.io/animations/1.0.0/README.md

Next steps

Animations: timing properties, reduced motion, ES modules and <da-animate>.
Patterns: recoloring, SVG tiles, the JS generator and <dp-pattern>.
Icons: SVG paths, CSS masks and the attribution Font Awesome Free needs.
Signing in to DevOps for Mac with your htmltool.io account.