Debut CSS

Simple enter and exit animations using CSS transitions.

Define simple transitions in your CSS and trigger them with JavaScript.

<dialog></dialog>

import { enter, exit } from "debut-css";

const dialog = document.querySelector("dialog");
await enter(dialog, "fade");
await exit(dialog, "fade");

.fade { /* */ }

.fade--before-enter { /* */ }
.fade--enter {/* */}
.fade--after-enter {/* */}

.fade--before-exit { /* */ }
.fade--exit {/* */}
.fade--after-exit {/* */}

Usage

There are only two functions exported and they have the same signature.

function enter(node: HTMLElement, ...effects: string[]): Promise<void>;
function exit(node: HTMLElement, ...effects: string[]): Promise<void>;

The node is any HTML element and the reset of the arguments are strings that specify the names of the effects to apply to that node. The effect becomes the prefix for all the css classes that debut will generate and apply at the proper times. For example...

enter(el, "modal");

Will apply these CSS classes to 'el'.

.modal--before-enter {
  // Define the starting point here
}
.modal--enter {
  // Define the ending point and transition styles
}
.modal--after-enter {
  // Define any styles that should remain after entering is finished.
}

Note: When calling enter or exit on an element with no transition-duration value, the promise reject with an error. It will wait for a 'transitionrun' event to fire before 100ms before throwing the error.

Testing

Tests run in a real browser (via Playwright) rather than a mocked DOM, since this library's whole job is orchestrating real CSS transition events.

yarn install
npx playwright install chromium
yarn test

yarn test runs @web/test-runner against everything in test/**/*.test.js in headless Chromium. For interactive/watch mode, use npx web-test-runner --watch.

This repo is pinned to Node 24 via .node-version. Tests also run in CI on every pull request (.github/workflows/ci.yml).