Skip to main content
Steps timing functions create animations that jump between keyframes in discrete intervals rather than smoothly transitioning. This creates a “stop-motion” or “frame-by-frame” effect perfect for retro animations, sprite sheets, and mechanical motion.

​
What are Steps?

Instead of smooth transitions, steps divide the animation into distinct frames:
  • Retro (8 steps): Chunky, retro video game style
  • Normal (16 steps): Balanced stepped animation
  • Modern (24 steps): Smoother stepped motion

​
Usage

Apply steps classes to create frame-by-frame animations: 
<div class="animate-rotate-360 animate-steps-retro">
  Rotates in 8 distinct steps
</div>

<div class="animate-slide-in-left animate-steps-normal">
  Slides in 16 frames
</div>

​
Available Steps Values

ClassCSS VariableStepsCharacterUse Case
animate-steps-retro--tw-anim-steps-retro8Very chunky, vintageRetro games, pixel art
animate-steps-normal--tw-anim-steps-normal16Balanced steppingGeneral stopped motion
animate-steps-modern--tw-anim-steps-modern24Smoother steppingSprite animations

​
Quick Start

<div class="animate-rotate-360 
            animate-steps-retro 
            animate-duration-slow 
            animate-iteration-count-infinite">
  🎮 Retro rotation (8 frames)
</div>

​
Comparison

See how different step counts affect the same animation: 
<!-- Smooth (default) -->
<div class="animate-rotate-360 animate-duration-slow">
  Smooth rotation
</div>

<!-- 8 steps - chunky -->
<div class="animate-rotate-360 animate-steps-retro animate-duration-slow">
  8-frame rotation
</div>

<!-- 16 steps - balanced -->
<div class="animate-rotate-360 animate-steps-normal animate-duration-slow">
  16-frame rotation
</div>

<!-- 24 steps - smoother -->
<div class="animate-rotate-360 animate-steps-modern animate-duration-slow">
  24-frame rotation
</div>

​
Custom Step Values

Use arbitrary numeric values for precise control: 
<!-- 4 steps - very chunky -->
<div class="animate-rotate-360 animate-steps-4">
  Ultra retro
</div>

<!-- 12 steps - custom middle ground -->
<div class="animate-slide-in-left animate-steps-12">
  Custom step count
</div>

<!-- 30 steps - very smooth stepping -->
<div class="animate-fade-in animate-steps-30">
  Many frames
</div>

​
Common Patterns

​
Retro Loading Spinner

Create a classic 8-bit style spinner: 
<div class="animate-spin-clockwise 
            animate-steps-retro 
            animate-iteration-count-infinite 
            animate-duration-slow">
  ⟳
</div>

​
Mechanical Clock Hand

Simulate a ticking clock hand: 
<div class="clock-hand 
            animate-rotate-360 
            animate-steps-normal 
            animate-iteration-count-infinite 
            animate-duration-1000">
  🕐
</div>

​
Sprite Sheet Animation

Perfect for sprite sheet frames: 
<div class="sprite 
            animate-steps-modern" 
     style="animation-name: sprite-frames; 
            animation-duration: 1s; 
            animation-iteration-count: infinite;">
  Character sprite
</div>

​
Retro Game Effect

<div class="game-character 
            animate-bounce 
            animate-steps-retro 
            animate-iteration-count-infinite">
  👾
</div>

​
Ticker Animation

Create a digital ticker or counter effect: 
<div class="ticker 
            animate-slide-in-bottom 
            animate-steps-normal 
            animate-iteration-count-thrice">
  New score: 1000
</div>

​
CSS Reference

.animate-steps-retro {
  animation-timing-function: steps(8);
}

.animate-steps-normal {
  animation-timing-function: steps(16);
}

.animate-steps-modern {
  animation-timing-function: steps(24);
}

/* Custom values */
.animate-steps-12 {
  animation-timing-function: steps(12);
}

​
Combining with Other Properties

​
With Duration

Control how long each full cycle takes: 
<div class="animate-rotate-360 
            animate-steps-retro 
            animate-duration-faster">
  Fast retro rotation
</div>

​
With Iteration

Repeat stepped animations: 
<div class="animate-shake 
            animate-steps-normal 
            animate-iteration-count-thrice">
  Stepped shake 3 times
</div>

​
With Easing (Mixed)

Note: Steps override easing functions, but you can combine them in complex animations: 
<!-- Steps take precedence over easing -->
<div class="animate-bounce 
            animate-steps-retro 
            animate-ease-out">
  Steps win (easing ignored)
</div>

​
Best Practices

Use retro for authentic 8-bit: 8 steps perfectly captures classic video game aesthetics.
Match duration to step count: Slower durations work better with fewer steps to avoid jerkiness.
Not for all animations: Steps work best with rotations, slides, and transforms. Fade animations may look odd.
Great for:
  • Loading spinners
  • Retro/pixel art aesthetics
  • Sprite sheet animations
  • Clock hands and tickers
  • Mechanical motion
  • Frame-by-frame effects
Avoid for:
  • Smooth UI transitions
  • Fade animations
  • Scale animations
  • Organic motion

​
Advanced Examples

​
Multi-Step Loading Indicator

<div class="loading-dots flex gap-2">
  <div class="animate-bounce 
              animate-steps-retro 
              animate-iteration-count-infinite 
              animate-delay-0">•</div>
  <div class="animate-bounce 
              animate-steps-retro 
              animate-iteration-count-infinite 
              animate-delay-200">•</div>
  <div class="animate-bounce 
              animate-steps-retro 
              animate-iteration-count-infinite 
              animate-delay-400">•</div>
</div>

​
Retro Game Coin Spin

<div class="coin 
            animate-flip-horizontal 
            animate-steps-retro 
            animate-iteration-count-infinite 
            animate-duration-slow">
  🪙
</div>

​
Digital Clock Style

<div class="digital-display">
  <div class="digit 
              animate-slide-in-bottom 
              animate-steps-normal" 
       style="animation-duration: 1s;">
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
</div>

​
Stepped Progress Bar

<div class="progress-bar">
  <div class="progress-fill 
              animate-expand-horizontally 
              animate-steps-modern 
              animate-duration-slow 
              animate-fill-mode-forwards" 
       style="animation-duration: 3s;">
  </div>
</div>

​
Robot/Mechanical Movement

<div class="robot 
            animate-slide-in-right 
            animate-steps-normal 
            animate-duration-slower">
  🤖
</div>

​
Pixel Art Character Walk

<div class="character-container">
  <div class="character 
              animate-steps-retro" 
       style="animation-name: walk-cycle; 
              animation-duration: 800ms; 
              animation-iteration-count: infinite;">
    🚶
  </div>
</div>

<style>
@keyframes walk-cycle {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}
</style>

​
Performance Considerations

Steps are performant: Stepped animations can be more performant than smooth animations since there are fewer calculations.
Steps animations are particularly efficient for:
  • Loading indicators
  • Background effects
  • Non-critical decorative elements

​
Accessibility

Steps can create more jarring motion: 
<!-- Respect motion preferences -->
<div class="animate-rotate-360 
            animate-steps-retro 
            motion-reduce:animate-none">
  Respects prefers-reduced-motion
</div>

​
CSS Variables

ClassCSS VariableValue
animate-steps-retro--tw-anim-steps-retro8
animate-steps-normal--tw-anim-steps-normal16
animate-steps-modern--tw-anim-steps-modern24
Steps work with:

Build docs developers (and LLMs) love

Get started for freeTalk to us