Skip to main content

Keyframes

The @keyframes CSS at-rule is used to define an animation that can be referenced to animate a DOM element.

This page goes over how Stylable handles @keyframes, for more details about the language feature itself, checkout the following resources:

Syntax​

Keyframes definition

/* empty definition */
@keyframes slide {}

/* animation definition */
@keyframes jump {
  from { color: red }
  to { color: green }
}

/* percentage keyframes */
@keyframes jump {
  0% { color: red }
  50% { color: green }
  100% { color: blue }
}

Keyframes usage

.x {
  /* within animation shorthand */
  animation: slide 3s ease-out infinite;
}
.y {
  /* same as above */
  animation-name: slide;
  animation-duration: 3s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

Import and Export​

An exported keyframes can be imported into another stylesheet with the @st-import atrule.

Insert rules into imported layer

/* get 'slide' keyframes definition from another stylesheet */
@st-import [keyframes(slide)] from './x.st.css';

.x {
  /* use in animation */
  animation-name: slide;
}

More import examples

/* map 'slide' keyframes to local name 'x-slide' */
@st-import [keyframes(slide as x-slide)] from './x.st.css';

/* import multiple keyframes */
@st-import [keyframes(slide, jump)] from './x.st.css';

Runtime​

A Keyframes definition can be accessed for dynamic styles using the keyframes mapping on the Stylable runtime stylesheet:

import { keyframes } from './sheet.st.css';

// map to target namespaced keyframes
keyframes.jump;

Namespace​

Stylable automatically namespaces any keyframes name according to the stylesheet it is defined in:

@keyframes slide {}

.x {
  animation-name: slide;
}

/* OUTPUT */
@keyframes NAMESPACE__slide {}

.x {
  animation-name: NAMESPACE__slide;
}

Disable namespace​

In some cases the default namespace behavior is unwanted. In such cases, st-global can be used to mark a keyframes definition as global:

@keyframes st-global(slide) {}
.x {
  animation-name: slide;
}

/* OUTPUT */
@keyframes slide {}
.x {
  animation-name: slide; /* no namespace */
}