✍️ Text Animations

Advanced techniques for animating text: typewriter, glowing, gradients, glitch effects, and more.

1. Typewriter Effect

Classic typing animation with blinking cursor.

Design with motion, not distraction.

@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}
.typewriter {
  overflow: hidden;
  border-right: 3px solid;
  white-space: nowrap;
  animation: typewriter 4s steps(40) forwards;
}
				

2. Glowing Text

Pulsing glow effect using text-shadow.

GLOW

@keyframes glow {
  0%, 100% { text-shadow: 0 0 10px #667eea; }
  50% { text-shadow: 0 0 40px #667eea; }
}
.glow-text {
  animation: glow 2s ease-in-out infinite;
}
				

3. Animated Gradient Text

Flowing gradient within text using background-clip.

GRADIENT

.gradient-text {
  background: linear-gradient(90deg, ...);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 3s ease infinite;
}
				

4. Glitch Effect

Digital distortion effect with pseudo-elements.

GLITCH

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  animation: glitch1 0.2s infinite;
}
.glitch::before { color: red; }
.glitch::after { color: cyan; }
				

5. Bounce Text (Letter by Letter)

Each letter bounces with staggered delay.

B O U N C E

.bounce-text span {
  display: inline-block;
  animation: bounce-letter 1s ease-in-out infinite;
}
.bounce-text span:nth-child(2) {
  animation-delay: 0.1s;
}
				

6. Reveal Animation

Text reveals from left to right using clip-path.

Revealed Text

@keyframes revealText {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
				

7. Wave Effect

Letters move in a wave pattern.

W A V E S

.wave-text span {
  display: inline-block;
  animation: wave 1.2s ease-in-out infinite;
}
.wave-text span:nth-child(n) {
  animation-delay: calc(n * 0.1s);
}
				

💡 Key Takeaways

Typewriter: Use steps() timing function for character-by-character effect
Gradient text: Requires -webkit-background-clip: text and -webkit-text-fill-color: transparent
Staggered letters: Wrap each letter in <span> and use animation-delay
Glitch: Use ::before and ::after pseudo-elements with attr(data-text)
Accessibility: Don't rely solely on animation to convey meaning; provide text alternatives