Template:TextAnimations/styles.css: Difference between revisions

Revision as of 16:41, 16 March 2026

/* 1. Base Keyframes */
@keyframes wave {
  0%, 100% { top: 0; }
  50%      { top: -6px; }
}
@keyframes hue-cycle {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(360deg); }
}

/* 2. Container & Formatting */
.text-animation-container {
  display: inline !important;
  white-space: nowrap;
  padding: 2px 4px;
  border-radius: 3px;
}

/* Updated: These now target the word AND the letters */
.force-bold, .force-bold span { font-weight: bold !important; }
.force-italic, .force-italic span { font-style: italic !important; }

/* Glow: Multi-layered for maximum 'pop' */
.force-glow, .force-glow span {
  text-shadow: 0 0 5px currentColor, 0 0 10px currentColor !important;
}

/* Shadow: Soft drop shadow */
.force-shadow, .force-shadow span {
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5) !important;
}

/* 3. Animation Logic */
.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 span {
  display: inline-block !important;
  position: relative !important;
  animation: wave 1s ease-in-out infinite, hue-cycle 3s linear infinite !important;
}

/* Ensure letters stay transparent to show background */
.text-animation-container span {
  display: inline-block !important;
  background: none !important;
}

/* 4. Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  html body .wavy span, html body .rainbow span { 
    animation-iteration-count: infinite !important;
    animation-play-state: running !important;
  }
}