Template:TextAnimations/styles.css: Difference between revisions

Revision as of 19:08, 17 March 2026

/* Keyframes */
@keyframes wavy-move {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); } 
}

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

/* New Jolt/Wiggle Keyframes */
@keyframes jolt-shake {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(1px, -1px); }
  50%  { transform: translate(-1px, 1px); }
  75%  { transform: translate(1px, 1px); }
  100% { transform: translate(0, 0); }
}

/* Container & Spans */
.text-animation-container {
  display: inline-block;
  white-space: pre-wrap; /* Maintains spacing */
}

.text-animation-container span {
  display: inline-block;
  position: relative;
  transition: transform 0.2s;
}

/* Effect Triggers */
.wavy span { animation: wavy-move 2.5s ease-in-out infinite; }
.rainbow span { 
  animation: rainbow-cycle 3s linear infinite; 
  color: #ff4d4d; /* Base red for hue-rotate to work */
}
.jolt span {
  animation: jolt-shake 0.15s linear infinite;
  display: inline-block;
}

/* Utility Classes */
.force-glow { text-shadow: 0 0 8px currentColor; }
.force-shadow { text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
.force-bold { font-weight: bold; }
.force-italic { font-style: italic; }