MediaWiki:Wikia.css

@import url('https://fonts.googleapis.com/css?family=Great+Vibes&display=swap');

/* TEXT ANIMATIONS */ .wavy-text { display: inline-flex; } .wavy-text span { animation: jiggle; animation-duration: 900ms; animation-iteration-count: infinite; } .wavy-text span:nth-child(1) { animation-delay: .10s } .wavy-text span:nth-child(2) { animation-delay: .15s } .wavy-text span:nth-child(3) { animation-delay: .20s } .wavy-text span:nth-child(4) { animation-delay: .25s } .wavy-text span:nth-child(5) { animation-delay: .30s } .wavy-text span:nth-child(6) { animation-delay: .35s } .wavy-text span:nth-child(7) { animation-delay: .40s } .wavy-text span:nth-child(8) { animation-delay: .45s } .wavy-text span:nth-child(9) { animation-delay: .50s } .wavy-text span:nth-child(10) { animation-delay: .55s } .wavy-text span:nth-child(11) { animation-delay: .60s } .wavy-text span:nth-child(12) { animation-delay: .65s } .wavy-text span:nth-child(13) { animation-delay: .70s } .wavy-text span:nth-child(14) { animation-delay: .75s } .wavy-text span:nth-child(15) { animation-delay: .80s } .wavy-text span:nth-child(16) { animation-delay: .85s } .wavy-text span:nth-child(17) { animation-delay: .90s } .wavy-text span:nth-child(18) { animation-delay: .95s } .wavy-text span:nth-child(19) { animation-delay: 1s } .wavy-text span:nth-child(20) { animation-delay: 1.05s } .wavy-text span:nth-child(21) { animation-delay: 1.10s } .wavy-text span:nth-child(22) { animation-delay: 1.15s } .wavy-text span:nth-child(23) { animation-delay: 1.20s } .wavy-text span:nth-child(24) { animation-delay: 1.25s } .wavy-text span:nth-child(25) { animation-delay: 1.30s } .wavy-text span:nth-child(26) { animation-delay: 1.35s } .wavy-text span:nth-child(27) { animation-delay: 1.40s } .wavy-text span:nth-child(28) { animation-delay: 1.45s } .wavy-text span:nth-child(29) { animation-delay: 1.50s } .wavy-text span:nth-child(30) { animation-delay: 1.55s } .wavy-text span:nth-child(31) { animation-delay: 1.60s } .wavy-text span:nth-child(32) { animation-delay: 1.65s } .wavy-text span:nth-child(33) { animation-delay: 1.70s } .wavy-text span:nth-child(34) { animation-delay: 1.75s } .wavy-text span:nth-child(35) { animation-delay: 1.80s } .wavy-text span:nth-child(36) { animation-delay: 1.85s } .wavy-text span:nth-child(37) { animation-delay: 1.90s } .wavy-text span:nth-child(38) { animation-delay: 1.95s } .wavy-text span:nth-child(39) { animation-delay: 2s } @keyframes jiggle { from { transform: translateY(0); }   50% {        transform: translateY(3px) }   to { transform: translateY(0); } } /*! * * * * * * * * * * * * * * * * * * * *\   CSShake :: shake-hard v1.5.0 CSS classes to move your DOM (c) 2015 @elrumordelaluz http://elrumordelaluz.github.io/csshake/ Licensed under MIT \* * * * * * * * * * * * * * * * * * * * */ .shake-text { display: inline-flex; } .shake-text span { animation:shake; transform-origin: center center; animation-play-state: running; animation-iteration-count: infinite; animation-duration: 100ms; animation-timing-function: ease-in-out; } .shake-text span:nth-child(1) { animation-delay: .10s } .shake-text span:nth-child(2) { animation-delay: .15s } .shake-text span:nth-child(3) { animation-delay: .20s } .shake-text span:nth-child(4) { animation-delay: .25s } .shake-text span:nth-child(5) { animation-delay: .30s } .shake-text span:nth-child(6) { animation-delay: .35s } .shake-text span:nth-child(7) { animation-delay: .40s } .shake-text span:nth-child(8) { animation-delay: .45s } .shake-text span:nth-child(9) { animation-delay: .50s } .shake-text span:nth-child(10) { animation-delay: .55s } .shake-text span:nth-child(11) { animation-delay: .60s } .shake-text span:nth-child(12) { animation-delay: .65s } .shake-text span:nth-child(13) { animation-delay: .70s } .shake-text span:nth-child(14) { animation-delay: .75s } .shake-text span:nth-child(15) { animation-delay: .80s } .shake-text span:nth-child(16) { animation-delay: .85s } .shake-text span:nth-child(17) { animation-delay: .90s } .shake-text span:nth-child(18) { animation-delay: .95s } .shake-text span:nth-child(19) { animation-delay: 1s } .shake-text span:nth-child(20) { animation-delay: 1.05s } .shake-text span:nth-child(21) { animation-delay: 1.10s } .shake-text span:nth-child(22) { animation-delay: 1.15s } .shake-text span:nth-child(23) { animation-delay: 1.20s } .shake-text span:nth-child(24) { animation-delay: 1.25s } .shake-text span:nth-child(25) { animation-delay: 1.30s } .shake-text span:nth-child(26) { animation-delay: 1.35s } .shake-text span:nth-child(27) { animation-delay: 1.40s } .shake-text span:nth-child(28) { animation-delay: 1.45s } .shake-text span:nth-child(29) { animation-delay: 1.50s } .shake-text span:nth-child(30) { animation-delay: 1.55s } .shake-text span:nth-child(31) { animation-delay: 1.60s } .shake-text span:nth-child(32) { animation-delay: 1.65s } .shake-text span:nth-child(33) { animation-delay: 1.70s } .shake-text span:nth-child(34) { animation-delay: 1.75s } .shake-text span:nth-child(35) { animation-delay: 1.80s } .shake-text span:nth-child(36) { animation-delay: 1.85s } .shake-text span:nth-child(37) { animation-delay: 1.90s } .shake-text span:nth-child(38) { animation-delay: 1.95s } .shake-text span:nth-child(39) { animation-delay: 2s } .shake-text span:nth-child(40) { animation-delay: 2.05s } .shake-text span:nth-child(41) { animation-delay: 2.10s } .shake-text span:nth-child(42) { animation-delay: 2.15s } .shake-text span:nth-child(43) { animation-delay: 2.20s } .shake-text span:nth-child(44) { animation-delay: 2.25s } .shake-text span:nth-child(45) { animation-delay: 2.30s } .shake-text span:nth-child(46) { animation-delay: 2.35s } .shake-text span:nth-child(47) { animation-delay: 2.40s } .shake-text span:nth-child(48) { animation-delay: 2.45s } .shake-text span:nth-child(49) { animation-delay: 2.50s } .shake-text span:nth-child(50) { animation-delay: 2.55s } .shake-text span:nth-child(51) { animation-delay: 2.60s } .shake-text span:nth-child(52) { animation-delay: 2.65s } .shake-text span:nth-child(53) { animation-delay: 2.70s } .shake-text span:nth-child(54) { animation-delay: 2.75s } .shake-text span:nth-child(56) { animation-delay: 2.80s } .shake-text span:nth-child(57) { animation-delay: 2.85s } .shake-text span:nth-child(58) { animation-delay: 2.90s } .shake-text span:nth-child(59) { animation-delay: 2.95s } .shake-text span:nth-child(60) { animation-delay: 3s } @keyframes shake { 2% {   transform: translate(0px, 1px) rotate(0.5deg); } 4% {   transform: translate(0px, 1px) rotate(0.5deg); } 6% {   transform: translate(1px, 1px) rotate(0.5deg); } 8% {   transform: translate(1px, 1px) rotate(0.5deg); } 10% {   transform: translate(1px, 1px) rotate(0.5deg); } 12% {   transform: translate(1px, 1px) rotate(0.5deg); } 14% {   transform: translate(0px, 0px) rotate(0.5deg); } 16% {   transform: translate(1px, 0px) rotate(0.5deg); } 18% {   transform: translate(0px, 1px) rotate(0.5deg); } 20% {   transform: translate(0px, 1px) rotate(0.5deg); } 22% {   transform: translate(1px, 1px) rotate(0.5deg); } 24% {   transform: translate(0px, 1px) rotate(0.5deg); } 26% {   transform: translate(0px, 0px) rotate(0.5deg); } 28% {   transform: translate(1px, 0px) rotate(0.5deg); } 30% {   transform: translate(1px, 0px) rotate(0.5deg); } 32% {   transform: translate(0px, 1px) rotate(0.5deg); } 34% {   transform: translate(0px, 1px) rotate(0.5deg); } 36% {   transform: translate(0px, 0px) rotate(0.5deg); } 38% {   transform: translate(1px, 1px) rotate(0.5deg); } 40% {   transform: translate(1px, 0px) rotate(0.5deg); } 42% {   transform: translate(0px, 1px) rotate(0.5deg); } 44% {   transform: translate(0px, 1px) rotate(0.5deg); } 46% {   transform: translate(0px, 0px) rotate(0.5deg); } 48% {   transform: translate(0px, 1px) rotate(0.5deg); } 50% {   transform: translate(0px, 1px) rotate(0.5deg); } 52% {   transform: translate(1px, 1px) rotate(0.5deg); } 54% {   transform: translate(0px, 0px) rotate(0.5deg); } 56% {   transform: translate(0px, 0px) rotate(0.5deg); } 58% {   transform: translate(0px, 0px) rotate(0.5deg); } 60% {   transform: translate(0px, 1px) rotate(0.5deg); } 62% {   transform: translate(0px, 0px) rotate(0.5deg); } 64% {   transform: translate(1px, 0px) rotate(0.5deg); } 66% {   transform: translate(0px, 1px) rotate(0.5deg); } 68% {   transform: translate(0px, 0px) rotate(0.5deg); } 70% {   transform: translate(1px, 1px) rotate(0.5deg); } 72% {   transform: translate(1px, 0px) rotate(0.5deg); } 74% {   transform: translate(0px, 1px) rotate(0.5deg); } 76% {   transform: translate(0px, 1px) rotate(0.5deg); } 78% {   transform: translate(1px, 0px) rotate(0.5deg); } 80% {   transform: translate(1px, 0px) rotate(0.5deg); } 82% {   transform: translate(0px, 0px) rotate(0.5deg); } 84% {   transform: translate(1px, 0px) rotate(0.5deg); } 86% {   transform: translate(0px, 0px) rotate(0.5deg); } 88% {   transform: translate(0px, 0px) rotate(0.5deg); } 90% {   transform: translate(1px, 1px) rotate(0.5deg); } 92% {   transform: translate(1px, 1px) rotate(0.5deg); } 94% {   transform: translate(1px, 0px) rotate(0.5deg); } 96% {   transform: translate(1px, 0px) rotate(0.5deg); } 98% {   transform: translate(0px, 0px) rotate(0.5deg); } 0%, 100% {   transform: translate(0, 0) rotate(0); } } .wavy-text:hover span, .shake-text:hover span { animation-name: none; }