Template:TextAnimations/styles.css

.force-bold, .force-bold span {
  font-weight: bold !important;
}

.force-italic, .force-italic span {
  font-style: italic !important;
}

/* Ensure container doesn't block the children */
.text-animation-container {
  display: inline-block;
}

/* 1. Base Keyframes - Using 'top' is safe and won't shake the page */
@keyframes wave {
  0%, 100% { top: 0; }
  50%      { top: -6px; }
}

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

/* Standard Styles */
.wavy span { 
  display: inline-block !important;
  position: relative !important;
  animation: wave 1s ease-in-out infinite !important; 
}

.rainbow span { 
  display: inline-block !important;
  animation: hue-cycle 3s linear infinite !important; 
}

.wavy, .rainbow {
  font-weight: inherit !important;
  font-style: inherit !important;
}

.wavy.rainbow span {
  display: inline-block !important;
  position: relative !important;
  animation: wave 1s ease-in-out infinite, hue-cycle 3s linear infinite !important;
}

/* 3. Override Styles (Reduced Motion) */
@media (prefers-reduced-motion: reduce) {
  html body .wavy span,
  html body .rainbow span,
  html body .wavy.rainbow span { 
    animation-iteration-count: infinite !important;
    animation-play-state: running !important;
    display: inline-block !important;
    position: relative !important;
  }
  
  html body .wavy span { 
    animation-name: wave !important; 
    animation-duration: 1s !important; 
  }
  html body .rainbow span { 
    animation-name: hue-cycle !important; 
    animation-duration: 3s !important; 
  }
  html body .wavy.rainbow span { 
    animation-name: wave, hue-cycle !important; 
    animation-duration: 1s, 3s !important;
  }
}