Template:TextAnimations/styles.css: Difference between revisions
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* Keyframes */ | /* 1. Keyframes */ | ||
@keyframes | @keyframes wave { | ||
0%, 100% { | 0%, 100% { top: 0; } | ||
50% { | 50% { top: -2px; } | ||
} | } | ||
@keyframes | @keyframes hue-cycle { | ||
from { filter: hue-rotate(0deg); } | from { filter: hue-rotate(0deg); } | ||
to { filter: hue-rotate(360deg); } | to { filter: hue-rotate(360deg); } | ||
} | } | ||
@keyframes jolt-shake { | @keyframes jolt-shake { | ||
0% { transform: translate(0, 0); } | 0% { transform: translate(0,0); } | ||
25% { transform: translate(1px, -1px); } | 25% { transform: translate(1px, -1px); } | ||
50% { transform: translate(-1px, 1px); } | 50% { transform: translate(-1px, 1px); } | ||
75% { transform: translate(1px, 1px); } | 75% { transform: translate(1px, 1px); } | ||
100% { transform: translate(0, 0); } | 100% { transform: translate(0,0); } | ||
} | } | ||
/* Container & Spans */ | /* 2. Container & Spans - Vital for MediaWiki */ | ||
.text-animation-container { | .text-animation-container { | ||
display: inline | display: inline !important; | ||
white-space: pre-wrap; /* | white-space: pre-wrap !important; /* Preserves spaces */ | ||
} | } | ||
.text-animation-container span { | .text-animation-container span { | ||
display: inline-block; | display: inline-block !important; | ||
position: relative; | position: relative !important; | ||
background: transparent !important; | |||
} | } | ||
/* | /* 3. The Effects */ | ||
.wavy span { animation: | .wavy span { animation: wave 2.5s ease-in-out infinite !important; } | ||
.rainbow span { | .rainbow span { animation: hue-cycle 3s linear infinite !important; color: #ff0000 !important; } | ||
.jolt span { animation: jolt-shake 0.15s linear infinite !important; } | |||
} | /* Combined Effects */ | ||
.jolt span { | .wavy.rainbow span { animation: wave 2.5s ease-in-out infinite, hue-cycle 3s linear infinite !important; } | ||
} | |||
/* | /* 4. Formatting Utilities */ | ||
.force-glow { text-shadow: 0 0 | .force-glow, .force-glow span { text-shadow: 0 0 5px currentColor, 0 0 10px currentColor !important; } | ||
.force-shadow { text-shadow: 2px 2px | .force-shadow, .force-shadow span { text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5) !important; } | ||
.force-bold { font-weight: bold; } | .force-bold, .force-bold span { font-weight: bold !important; } | ||
.force-italic { font-style: italic; } | .force-italic, .force-italic span { font-style: italic !important; } | ||
Revision as of 19:14, 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); }
}
@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); }
}
/* 2. Container & Spans - Vital for MediaWiki */
.text-animation-container {
display: inline !important;
white-space: pre-wrap !important; /* Preserves spaces */
}
.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; }
.jolt span { animation: jolt-shake 0.15s linear infinite !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; }