Template:TextAnimations/styles.css: Difference between revisions

Revision as of 06:59, 14 March 2026

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

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

/* 2. Standard Styles (For users with animations ENABLED) */
.wavy span {
  display: inline-block;
  animation: wave 1s ease-in-out infinite;
  animation-delay: inherit;
}

.rainbow span {
  animation: hue-cycle 3s linear infinite;
  animation-delay: inherit;
}

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

/* 3. Override Styles (For users with animations DISABLED) */
@media (prefers-reduced-motion: reduce) {
  html body .wavy span {
    display: inline-block !important;
    animation: wave 1s ease-in-out infinite !important;
    animation-delay: inherit !important;
  }

  html body .rainbow span {
    animation: hue-cycle 3s linear infinite !important;
    animation-delay: inherit !important;
  }

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