Custom keyframe animations in Tailwind - Browser Rendering Trace

Render Flow - Custom keyframe animations

[Read tailwind.config.js] -> [Parse keyframes] -> [Generate animation utilities] -> [Apply animation class to element] -> [Browser triggers animation frames] -> [Paint frames on screen]

Tailwind reads the custom keyframes from the config file, creates animation classes, then the browser runs the animation frame by frame to show the effect.

Render Steps - 3 Steps

Code Added:@keyframes bounce-slow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }

Before

[ ]
(No animation, static box)

→

After

[ ]
(Box can now move up and down)

Defines the movement pattern for the bounce animation, telling the browser how the box should move over time.

🔧 Browser Action:Registers keyframe animation in browser's animation engine

Code Sample

A blue box with white text that moves up and down slowly in a smooth bouncing motion.

Tailwind

<div class="animate-bounce-slow bg-blue-500 text-white p-4 rounded">
  Bounce Slowly
</div>

Tailwind

@keyframes bounce-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.animate-bounce-slow {
  animation: bounce-slow 2s infinite;
}

Render Quiz - 3 Questions

After applying step 2, what visual change do you see on the box?

A The box moves up and down slowly in a loop

B The box changes color gradually

C The box stays still with no movement

D The box grows bigger and smaller

Common Confusions - 3 Topics

Why doesn't my element move even though I defined keyframes?

You must apply the animation class with animation-name and duration to the element. Defining keyframes alone does nothing visually (see render_steps 1 and 2).

💡 Keyframes define movement; animation properties apply it to elements.

Why is my animation too fast or too slow?

The animation-duration controls speed. A smaller duration means faster animation. Adjust duration in animation property (render_step 2).

💡 Longer duration = slower animation; shorter = faster.

Why does the animation stop after one bounce?

If animation-iteration-count is not infinite or set properly, animation stops after finishing once. Use 'infinite' to loop (render_step 2).

💡 Use infinite to keep animation repeating.

Property Reference

Property	Value Applied	Effect	Common Use
@keyframes	bounce-slow	Defines the animation steps and transforms	Create custom animations
animation-name	bounce-slow	Links element to keyframe animation	Apply specific animation
animation-duration	2s	Sets how long one animation cycle lasts	Control speed of animation
animation-iteration-count	infinite	Makes animation repeat forever	Loop animations
transform	translateY(-20px)	Moves element vertically during animation	Create movement effects

Concept Snapshot

Custom keyframe animations let you create your own movement patterns. Define steps with @keyframes, then apply with animation-name and animation-duration. Use animation-iteration-count: infinite to loop animations. Tailwind lets you add these in config and use classes like animate-bounce-slow. This creates smooth, repeating visual effects like bouncing or sliding.