Template:TextAnimations/styles.css: Difference between revisions

Revision as of 22:23, 17 March 2026

/* 1. Keyframes */
@keyframes wave {
  0%, 100% { top: 0; }
  50%      { top: -2px; } 
}

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

/* Global Heartbeat - Fades the entire span simultaneously */
@keyframes global-heartbeat {
  0%, 100% { opacity: 0.7; filter: brightness(0.9); transform: scale(1); }
  10%      { opacity: 1;   filter: brightness(1.2); transform: scale(1.02); }
  20%      { opacity: 0.8; filter: brightness(1);   transform: scale(1); }
  30%      { opacity: 1;   filter: brightness(1.3); transform: scale(1.04); }
  45%      { opacity: 0.7; filter: brightness(0.9); transform: scale(1); }
}

/* Three distinct "shiver" paths to ensure variety */
@keyframes jolt-a {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(-0.3px, -0.5px); }
  75%      { transform: translate(0.2px, 0.4px); }
}
@keyframes jolt-b {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(0.3px, 0.5px); }
  75%      { transform: translate(-0.2px, -0.4px); }
}
@keyframes jolt-c {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(-0.2px, 0.5px); }
  75%      { transform: translate(0.3px, -0.5px); }
}

/* Helper classes assigned by JS */
.jolt-v1 { animation: jolt-a 0.35s linear infinite !important; }
.jolt-v2 { animation: jolt-b 0.35s linear infinite !important; }
.jolt-v3 { animation: jolt-c 0.35s linear infinite !important; }

/* 2. Container & Spans - Vital for MediaWiki */
.text-animation-container {
  display: inline-block !important;
  white-space: pre !important; 
}

.text-animation-container span {
  display: inline-block !important;
  position: relative !important;
  background: transparent !important;
}

/* 3. The Effects */
.wavy span    { animation: wave 2.5s ease-in-out infinite !important; }
.rainbow span { animation: hue-cycle 3s linear infinite !important; color: #ff0000 !important; }
.pulse span {
  animation: global-heartbeat 3s ease-in-out infinite !important;
  display: inline-block !important;
}
.jolt span {
  display: inline-block !important;
  margin: 0 0.1px !important;
}

/* Combined Effects */
.wavy.rainbow span { animation: wave 2.5s ease-in-out infinite, hue-cycle 3s linear infinite !important; }

/* 4. Formatting Utilities */
.force-glow, .force-glow span { text-shadow: 0 0 5px currentColor, 0 0 10px currentColor !important; }
.force-shadow, .force-shadow span { text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5) !important; }
.force-bold, .force-bold span { font-weight: bold !important; }
.force-italic, .force-italic span { font-style: italic !important; }