Text Animations in CSS

/* Typewriter Effect */
.typewriter {
  overflow: hidden;
  white-space: nowrap;
  animation: typing 3s steps(30), blink 0.5s step-end infinite alternate;
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink {
  50% { border-color: transparent; }
}

/* Gradient Animation */
.gradient-text {
  background: linear-gradient(45deg, #4CAF50, #2196F3, #9C27B0);
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient 3s ease infinite;
}

@keyframes gradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}