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 */
}