Keyframes

AliasCSS lets you define CSS keyframes directly in markup with a custom keyframes-[name] attribute.

This is useful when you want to keep animation logic close to the element it affects, reuse the same AliasCSS utility grammar for motion, and avoid jumping back and forth between HTML and handwritten @keyframes blocks.

Quick start

If you only remember one pattern, remember this:

<div
  keyframes-fadeOut="@0-opacity-1 @100-opacity-0"
  class="an-fadeOut adu-1s"
>
  Fade Out
</div>

This does two things:

• defines an animation named fadeOut
• applies it using an-fadeOut and adu-1s

Basic syntax

keyframes-[animation-name]="@[percentage]-utility @[percentage]-utility"

Example

<div
  keyframes-fadeOut="@0-opacity-1 @100-opacity-0"
  class="an-fadeOut adu-1s"
>
  Fade Out
</div>

Compiled idea

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
 
.an-fadeOut {
  animation-name: fadeOut;
}

Why this feature matters

AliasCSS keyframes are powerful because they let motion follow the same authoring model as the rest of the system.

Benefits

• Faster prototyping: define animation without leaving the markup.
• Better locality: animation logic stays close to the component it affects.
• Consistent grammar: the same utility rules used for layout, color, spacing, and transforms also work inside keyframe steps.
• Easy composition: combine keyframes with CSS variables, grouped utilities, timing utilities, and reusable component classes.
• Hybrid workflow: keep atomic flexibility while still authoring custom animations.

That makes keyframes feel like a natural extension of the framework instead of a separate motion system. Utility-based systems are valued for their composability and visibility at the point of use, and this feature extends that same strength into animation authoring.[web:45][web:48]

Usage

Minimal example

<h1
  keyframes-flash="@0-o-1 @100-o-0"
  class="an-flash adu-2s"
>
  Flash!
</h1>

Full semantic version

<h1
  keyframes-flash="@0-opacity-1 @100-opacity-0"
  class="animation-name-flash animation-duration-2s"
>
  Flash!
</h1>

Both examples define the same animation. The difference is only whether you prefer shorthand utilities or full semantic class names.

Grouped steps

When a single keyframe step needs multiple declarations, group them with [].

Syntax

@[percentage]-[utility,utility,utility]

Example

<div
  keyframes-pop-up="
    @0-[tf-ty-0,tfo-50p-50p,bxs--shadow-down]
    @100-[tf-ty--50px,tfo-50p-50p,bxs--shadow-up]
  "
  class="bg-rg-gray300-gray600 w-64px h-64px br-50p an-pop-up adu-1d5s ada atf--timing-func aici afmbo"
  style="
    --shadow-up: 0 50px 3px -20px rgba(0,0,0,0.3);
    --shadow-down: 0 50px 3px -5px rgba(0,0,0,0.3);
    --timing-func: cubic-bezier(0.250, 0.460, 0.450, 0.940);
  "
></div>

Grouped steps make complex animations much easier to read because each percentage block stays visually together.

Grouping percentages

AliasCSS can also group multiple percentages for the same keyframe step.

This is useful when the same declaration or declaration group should be reused across several points in the animation timeline.

Syntax

@[p1,p2,p3]-utility
@[p1,p2,p3]-[utility,utility,utility]

Single utility across multiple percentages

<h1
  keyframes-flash="@[0,50,100]-display-flex"
  class="an-flash adu-2s"
>
  Flash
</h1>

Compiled idea:

@keyframes flash {
  0%, 50%, 100% {
    display: flex;
  }
}

Grouped utilities across multiple percentages

<h1
  keyframes-flash="@[0,50,100]-display-flex @[25,75]-[display-none,transform-scale-0.5]"
  class="an-flash adu-2s"
>
  Flash
</h1>

Compiled idea:

@keyframes flash {
  0%, 50%, 100% {
    display: flex;
  }
 
  25%, 75% {
    display: none;
    transform: scale(0.5);
  }
}

This pattern is great for blinking, pulsing, flashing, or multi-phase motion where several percentages share the same visual state.

Live pattern example

<div
  class="bgc-ecf0f1 oh w-100p h-100px pa t-0 l-0 df aic acc jcc"
  keyframes-loading="@100-transform-scale-2 @100-border-color-gray600"
>
  <span class="dot" class-dot="br-100p b-5px-solid-555 m-10px an-loading adu-0d6s atf-eio ada aici"></span>
  <span class="dot adl-0d2s"></span>
  <span class="dot adl-0d4s"></span>
</div>

This pattern works well for loaders because you can define the motion once, then create variation through standard animation utilities such as delay and duration.

20 useful animations

<div 
keyframes-fadeIn="@0-opacity-0 @100-opacity-1" class="an-fadeIn adu-300ms">
  Fade In
</div>

<div 
keyframes-fadeOut="@0-opacity-1 @100-opacity-0" 
class="an-fadeOut adu-300ms">
  Fade Out
</div>

<div 
keyframes-flash="@0-opacity-1 @100-opacity-0" 
class="an-flash adu-1s">
  Flash
</div>

<div 
keyframes-blink="@0-opacity-1 @50-opacity-0 @100-opacity-1" 
class="an-blink adu-1s">
  Blink
</div>

<div 
keyframes-slideUp="@0-tf-ty-20px @100-tf-ty-0" 
class="an-slideUp adu-400ms">
  Slide Up
</div>

<div 
keyframes-slideDown="@0-tf-ty--20px @100-tf-ty-0" 
class="an-slideDown adu-400ms">
  Slide Down
</div>

<div 
keyframes-slideLeft="@0-tf-tx--24px @100-tf-tx-0" 
class="an-slideLeft adu-400ms">
  Slide Left
</div>

<div 
keyframes-slideRight="@0-tf-tx-24px @100-tf-tx-0" 
class="an-slideRight adu-400ms">
  Slide Right
</div>

<div 
keyframes-dropIn="@0-[tf-ty--30px,opacity-0] @100-[tf-ty-0,opacity-1]" 
class="an-dropIn adu-400ms">
  Drop In
</div>

<div 
keyframes-scaleIn="@0-transform-scale-0.9 @100-transform-scale-1" 
class="an-scaleIn adu-250ms">
  Scale In
</div>

<div 
keyframes-scaleOut="@0-transform-scale-1 @100-transform-scale-0.9" 
class="an-scaleOut adu-250ms">
  Scale Out
</div>

<div 
keyframes-pop="@0-[transform-scale-0.8,opacity-0] @80-[transform-scale-1.05,opacity-1] @100-[transform-scale-1,opacity-1]" 
class="an-pop adu-350ms">
  Pop
</div>

<div 
keyframes-pulse="@0-transform-scale-1 @50-transform-scale-1.05 @100-transform-scale-1" 
class="an-pulse adu-1s">
  Pulse
</div>

<div 
keyframes-heartbeat="@0-transform-scale-1 @14-transform-scale-1.08 @28-transform-scale-1 @42-transform-scale-1.08 @70-transform-scale-1" 
class="an-heartbeat adu-1s">
  Heartbeat
</div>

<div 
keyframes-bounce="@0-tf-ty-0 @40-tf-ty--12px @60-tf-ty-0 @80-tf-ty--6px @100-tf-ty-0" 
class="an-bounce adu-700ms">
  Bounce
</div>

<div 
keyframes-float="@0-tf-ty-0 @50-tf-ty--8px @100-tf-ty-0" 
class="an-float adu-2s">
  Float
</div>

<div 
keyframes-spin="@0-transform-rotate-0 @100-transform-rotate-360deg" 
class="an-spin adu-1s">
  Spin
</div>

<div 
keyframes-rotateIn="@0-[transform-rotate--12deg,opacity-0] @100-[transform-rotate-0,opacity-1]" 
class="an-rotateIn adu-400ms">
  Rotate In
</div>

<div 
keyframes-shake="@0-tf-tx-0 @25-tf-tx--4px @50-tf-tx-4px @75-tf-tx--4px @100-tf-tx-0" 
class="an-shake adu-400ms">
  Shake
</div>

<div keyframes-wiggle="@0-transform-rotate-0 @25-transform-rotate--6deg @50-transform-rotate-6deg @75-transform-rotate--3deg @100-transform-rotate-0" 
class="an-wiggle adu-600ms">
  Wiggle
</div>

Naming conventions

Use animation names that describe behavior, not implementation details.

Good names

• fadeIn
• slideUp
• pop
• shake
• loading

Avoid

• anim1
• testMotion
• boxMove2
• tempKeyframe

Good naming matters because the animation name becomes part of the component API.

Recommended utility pairings

These utilities commonly work well with keyframes-[name]:

Best practices

• Start with simple two-step animations before building multi-step motion.
• Use grouped steps when several properties change together.
• Prefer CSS variables for complex shadow, transform-origin, or timing values.
• Keep interaction animations fast; reserve longer animations for onboarding, empty states, or decorative motion.
• Reuse animation names across components only when the motion behavior is actually the same.

Good utility-based documentation emphasizes clarity, scannability, and practical examples, so keep the most common patterns near the top of the page and move rare cases lower in the reference.[web:12][web:13]

Common pitfalls

• Writing very long ungrouped keyframe steps that are hard to read.
• Using unclear animation names that do not describe behavior.
• Mixing too many moving properties in one animation without grouping.
• Creating decorative motion for basic UI interactions where a simpler transition would be clearer.

Cheat sheet

keyframes-fadeOut="@0-opacity-1 @100-opacity-0"
keyframes-slideUp="@0-tf-ty-20px @100-tf-ty-0"
keyframes-pop="@0-[transform-scale-0.8,opacity-0] @100-[transform-scale-1,opacity-1]"
keyframes-shake="@0-tf-tx-0 @25-tf-tx--4px @50-tf-tx-4px"
keyframes-loading="@100-transform-scale-2 @100-border-color-gray600"

See also

• Pair this page with your Basic Usage page so readers understand utility syntax first.
• Link to your Animation Utilities page for an-*, adu-*, adl-*, and atf-*.
• If this page grows further, split it into:
  • Keyframes Basics
  • Grouped Keyframes
  • Animation Recipes
  • Animation Utility Reference