Template:TextAnimations/styles.css

/* Base Keyframes */
@keyframes wave {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@keyframes hue-cycle {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(360deg); }
}

/* Class logic */
.wavy span {
  display: inline-block;
  animation-name: wave;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.rainbow span {
  animation-name: hue-cycle;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.wavy.rainbow span {
  display: inline-block;
  animation-name: wave, hue-cycle;
  animation-duration: 1s, 3s;
  animation-iteration-count: infinite, infinite;
  animation-timing-function: ease-in-out, linear;
}

@media (prefers-reduced-motion: reduce) {
  /* 1. Reset Wavy animations */
  html body .wavy span {
    display: inline-block !important;
    animation-name: wave !important;
    animation-duration: 1s !important;
    animation-iteration-count: infinite !important;
    animation-delay: inherit !important;
  }

  /* 2. Reset Rainbow animations */
  html body .rainbow span {
    animation-name: hue-cycle !important;
    animation-duration: 3s !important;
    animation-iteration-count: infinite !important;
    animation-delay: inherit !important;
  }

  /* 3. Reset Combined animations */
  html body .wavy.rainbow span {
    display: inline-block !important;
    animation-name: wave, hue-cycle !important;
    animation-duration: 1s, 3s !important;
    animation-iteration-count: infinite, infinite !important;
    animation-delay: inherit !important;
  }
}