CSS Keyframes Demo | Web Animations

Define multi-step animations with precise control over intermediate states. Watch these animations loop automatically.

1. Slide In

Element enters from the left side.

Slide

						@keyframes slideIn {

						  from { transform: translateX(-100%); }

						  to { transform: translateX(0); }

						}

2. Bounce

Multi-step animation creating bounce effect.

						@keyframes bounce {

						  0%, 100% { translateY(0); }

						  25% { translateY(-30px); }

						  75% { translateY(-15px); }

						}

3. Pulse

Pulsing effect with expanding shadow.

						@keyframes pulse {

						  0% { transform: scale(1); }

						  50% { transform: scale(1.05); }

						  100% { transform: scale(1); }

						}

4. Fade In & Scale

Combined opacity and scale animation.

						@keyframes fadeInScale {

						  from { opacity: 0; scale: 0.8; }

						  to { opacity: 1; scale: 1; }

						}

5. Rotate & Color

Rotation with color transitions.

						@keyframes rotateColor {

						  0% { rotate: 0deg; }

						  100% { rotate: 360deg; }

						}

6. Complex Path

Multi-property animation along a path.

						animation:

						  complexMove 5s

						  ease-in-out infinite;

💡 Key Takeaways

Use @keyframes to define animation steps at specific percentages (0-100%)
Apply with animation: name duration timing-function delay iteration-count
animation-fill-mode controls the state before/after animation (forwards, backwards, both)
Use animation-play-state: paused to pause animations dynamically
Keyframes allow complex, choreographed animations impossible with transitions alone