style.keyframes()

style.keyframes(definition) defines an animation. Calling the result inside style() applies the animation, and its argument sets the animation’s options. The compiler generates a unique animation name.

Example

import { style } from "stillwind/react";

const fade = style.keyframes({
  from: "opacity-0",
  to: "opacity-100",
});
export const props = style(fade("duration-300 ease-in-out"));

const fade = undefined;
export const props = {className:"sw_4y7y6"};

@keyframes sw-kf-74r1m {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.sw_4y7y6 {
  animation-name: sw-kf-74r1m;
  animation-duration: .3s;
  animation-timing-function: var(--ease-in-out);
}

Define the frames

Write style.keyframes() as the initial value of a variable, with an object literal as its argument:

Under a variant, the definition replaces every frame. It does not inherit frames from the ordinary definition. Use media and supports-* variants here. Selector and container variants are not supported.

The declaration can be at the top level of a module, in a function, or in a callback. Each style.keyframes() call in the source creates one name, and the name stays the same in every render and function call. You can export the definition and import it in other modules.

Apply the animation

Call the definition inside style(), such as fade("duration-300 ease-in-out"). The argument is a string literal of animation options. Timing utilities set animation properties here: duration-300 sets animation-duration, not transition-duration. A utility that is not an animation option, such as p-4, produces no CSS, and invalid-animation-option reports it.

Write the call directly in style(). Storing fade("duration-300") in a variable causes SW10004.

To turn the animation on or off by condition, put the call under a variant, such as { "motion-safe:": fade("duration-300") }.

Generated code

When the compiler knows which animation a call uses, the call becomes plain class names, and the definition variable can become undefined in JavaScript. The compiler writes every @keyframes rule that the calls need, together with the theme values that the frames use.

See Animations for task-based examples, and invalid-keyframes-variant for unsupported variants.