Animation Name

Run a keyframes animation you define in your config.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome

Edge

Firefox

Safari

an:none

animation-name: none;

an:none is the only built-in name. Every other name comes from theme.keyframes in your config.

Media Queries

Prefix a class with a breakpoint to apply it from that width up.

Pseudo Classes

Prefix a class with a state to apply it only while that state matches.

Define Keyframes

Name an animation once in theme.keyframes & write its body as plain CSS. Each name becomes an an: class.

yumma.config.mjs

import { defineConfig } from "yummacss";
export default defineConfig({  theme: {    keyframes: {      spin: "to { rotate: 360deg; }",      "fade-in": "from { opacity: 0; }",    },  },});

Use Keyframes

Combine a name with Animation Duration, Animation Timing Function & Animation Iteration Count.

<span className="d:b w:4 h:4 bw:2 br:9999 an:spin adu:700 atf:l aic:inf"></span>

Only the keyframes a class uses are written to the output, once, however many variants use them.

Reduced Motion

Stop an animation for people who have asked for less motion with the @prm: variant.

<span className="an:spin adu:700 aic:inf @prm:an:none"></span>