CSS demos

Watch me animate

HTML

<p class="animation-1" href="#">Watch me animate</p>
      

CSS

.animation-1 {
  animation: animate-the-text 9s alternate ease-in-out infinite;
  flex: 1;
  font-size: 80px;
  text-align: center;
}

@keyframes animate-the-text {
  0%, 100% {
    color: teal;
    text-shadow: chocolate 12px -5px 20px;
    transform: scale(1.0) rotate(0deg);
  }
  25% {
    color: wheat;
    text-shadow: pink 20px -10px 5px;
    transform: scale(1.3) rotate(-36deg);
  }
  50% {
    color: steelblue;
    text-shadow: navajowhite -15px 15px 0px;
    transform: scale(0.5) rotate(18deg);
  }
  75% {
    color: burlywood;
    text-shadow: darkviolet 4px -4px 5px;
    transform: scale(1.2) rotate(-14deg);
  }
}