Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/davesnx/styled-ppx/llms.txt

Use this file to discover all available pages before exploring further.

The %keyframe / [%keyframe] extension lets you define CSS keyframe animations inline with your component styles. It parses the keyframe body at compile time, generates a unique hashed animation name, and returns an opaque value you can interpolate directly into animation-name or the animation shorthand.

​
Basic usage

Define percentage steps inside the extension string, then interpolate the result into a styled component using $(...): 
let fadeIn = %keyframe(`
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
`)

module Component = %styled.div(`
  animation-name: $(fadeIn);
  width: 100px;
  height: 100px;
`)

​
Notes

  • Outer braces are optional. Both %keyframe("{ 0% { ... } 100% { ... } }") and %keyframe("0% { ... } 100% { ... }") are equivalent — the enclosing { } around the whole block may be omitted.
  • The return type is opaque. The value returned by %keyframe has an opaque type whose internal representation is a string. You cannot pattern-match on it or concatenate it manually; use $(...) interpolation inside a CSS string to reference it.
  • The name is a hash. The animation name inserted into the generated CSS is a short hash derived from the keyframe content — the same mechanism used for generated class names in %cx and %styled.*.
Interpolate the keyframe value into the animation shorthand for concise declarations:
module Spinner = %styled.div(`
  animation: $(fadeIn) 0.3s ease-in-out infinite;
`)

Build docs developers (and LLMs) love

Get started for freeTalk to us