santycss
Version:
Plain-English utility-first CSS framework — no build step, just classes
773 lines (711 loc) • 62.4 kB
JavaScript
'use strict';
/**
* SantyCSS Extended Animations
* Full animate.css set with plain-English SantyCSS naming convention.
*
* Naming rules:
* animate-{type} → basic animation
* animate-{type}-in / out → entrance / exit
* animate-{type}-in-from-{side} → directional entrance
* animate-{type}-out-to-{side} → directional exit
* animation-speed-{name} → duration helper
* animation-delay-{ms} → delay helper
* animation-loop-{n} / forever → iteration helper
* animation-fill-{mode} → fill-mode helper
*/
const ANIMATION_CSS = `
/* ═══════════════════════════════════════════════════════════════════════
SANTY ANIMATIONS — animate.css compatible · Plain-English naming
═══════════════════════════════════════════════════════════════════════ */
/* ── Speed helpers ── */
.animation-speed-fastest { animation-duration: 0.3s !important; }
.animation-speed-fast { animation-duration: 0.5s !important; }
.animation-speed-normal { animation-duration: 1s !important; }
.animation-speed-slow { animation-duration: 1.5s !important; }
.animation-speed-slowest { animation-duration: 2s !important; }
.animation-speed-glacial { animation-duration: 3s !important; }
/* ── Delay helpers ── */
.animation-delay-100 { animation-delay: 0.1s; }
.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-300 { animation-delay: 0.3s; }
.animation-delay-400 { animation-delay: 0.4s; }
.animation-delay-500 { animation-delay: 0.5s; }
.animation-delay-600 { animation-delay: 0.6s; }
.animation-delay-700 { animation-delay: 0.7s; }
.animation-delay-800 { animation-delay: 0.8s; }
.animation-delay-900 { animation-delay: 0.9s; }
.animation-delay-1000 { animation-delay: 1s; }
.animation-delay-1500 { animation-delay: 1.5s; }
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-3000 { animation-delay: 3s; }
/* ── Iteration helpers ── */
.animation-loop-1 { animation-iteration-count: 1; }
.animation-loop-2 { animation-iteration-count: 2; }
.animation-loop-3 { animation-iteration-count: 3; }
.animation-loop-4 { animation-iteration-count: 4; }
.animation-loop-5 { animation-iteration-count: 5; }
.animation-loop-forever { animation-iteration-count: infinite; }
/* ── Fill-mode helpers ── */
.animation-fill-none { animation-fill-mode: none; }
.animation-fill-forwards { animation-fill-mode: forwards; }
.animation-fill-backwards { animation-fill-mode: backwards; }
.animation-fill-both { animation-fill-mode: both; }
/* ── Timing-function helpers ── */
.animation-ease { animation-timing-function: ease; }
.animation-ease-in { animation-timing-function: ease-in; }
.animation-ease-out { animation-timing-function: ease-out; }
.animation-ease-in-out { animation-timing-function: ease-in-out; }
.animation-linear { animation-timing-function: linear; }
.animation-ease-bounce { animation-timing-function: cubic-bezier(0.34,1.56,0.64,1); }
.animation-ease-elastic { animation-timing-function: cubic-bezier(0.68,-0.55,0.265,1.55); }
.animation-ease-spring { animation-timing-function: cubic-bezier(0.175,0.885,0.32,1.275); }
/* ── Direction helpers ── */
.animation-direction-normal { animation-direction: normal; }
.animation-direction-reverse { animation-direction: reverse; }
.animation-direction-alternate { animation-direction: alternate; }
.animation-direction-alternate-reverse { animation-direction: alternate-reverse; }
/* ── Extra delay helpers ── */
.animation-delay-750 { animation-delay: 0.75s; }
.animation-delay-1250 { animation-delay: 1.25s; }
.animation-delay-1500 { animation-delay: 1.5s; }
.animation-delay-2500 { animation-delay: 2.5s; }
.animation-delay-3000 { animation-delay: 3s; }
.animation-delay-4000 { animation-delay: 4s; }
.animation-delay-5000 { animation-delay: 5s; }
/* ── Extra speed helpers ── */
.animation-speed-ultra-fast { animation-duration: 0.15s !important; }
/* ── Extra iteration helpers ── */
.animation-iteration-2 { animation-iteration-count: 2; }
.animation-iteration-4 { animation-iteration-count: 4; }
.animation-iteration-5 { animation-iteration-count: 5; }
/* ── Pause / play ── */
.animation-paused { animation-play-state: paused; }
.animation-running { animation-play-state: running; }
.animation-none { animation: none; }
.animation-pause-on-hover:hover { animation-play-state: paused; }
/* ════════════════════════════════════════════════════
ATTENTION SEEKERS
Keep looping or use once (add animation-loop-1)
════════════════════════════════════════════════════ */
.animate-flash { animation: santy-flash 1s ease both; }
.animate-rubber-band { animation: santy-rubber-band 1s ease both; }
.animate-shake-x { animation: santy-shake-x 1s ease both; }
.animate-shake-y { animation: santy-shake-y 1s ease both; }
.animate-shake-head { animation: santy-shake-head 1s ease-in-out both; }
.animate-swing { animation: santy-swing 1s ease both; transform-origin: top center; }
.animate-tada { animation: santy-tada 1s ease both; }
.animate-wobble { animation: santy-wobble 1s ease both; }
.animate-jelly { animation: santy-jelly 1s ease both; }
.animate-heartbeat { animation: santy-heartbeat 1.3s ease-in-out both; }
/* ════════════════════════════════════════════════════
FADING ENTRANCES
════════════════════════════════════════════════════ */
.animate-fade-in { animation: santy-fade-in 0.5s ease both; }
.animate-fade-in-from-top { animation: santy-fade-in-from-top 0.5s ease both; }
.animate-fade-in-from-bottom { animation: santy-fade-in-from-bottom 0.5s ease both; }
.animate-fade-in-from-left { animation: santy-fade-in-from-left 0.5s ease both; }
.animate-fade-in-from-right { animation: santy-fade-in-from-right 0.5s ease both; }
.animate-fade-in-top-left { animation: santy-fade-in-top-left 0.5s ease both; }
.animate-fade-in-top-right { animation: santy-fade-in-top-right 0.5s ease both; }
.animate-fade-in-bottom-left { animation: santy-fade-in-bottom-left 0.5s ease both; }
.animate-fade-in-bottom-right { animation: santy-fade-in-bottom-right 0.5s ease both; }
/* ════════════════════════════════════════════════════
FADING EXITS
════════════════════════════════════════════════════ */
.animate-fade-out { animation: santy-fade-out 0.5s ease both; }
.animate-fade-out-to-top { animation: santy-fade-out-to-top 0.5s ease both; }
.animate-fade-out-to-bottom { animation: santy-fade-out-to-bottom 0.5s ease both; }
.animate-fade-out-to-left { animation: santy-fade-out-to-left 0.5s ease both; }
.animate-fade-out-to-right { animation: santy-fade-out-to-right 0.5s ease both; }
.animate-fade-out-top-left { animation: santy-fade-out-top-left 0.5s ease both; }
.animate-fade-out-top-right { animation: santy-fade-out-top-right 0.5s ease both; }
.animate-fade-out-bottom-left { animation: santy-fade-out-bottom-left 0.5s ease both; }
.animate-fade-out-bottom-right { animation: santy-fade-out-bottom-right 0.5s ease both; }
/* ════════════════════════════════════════════════════
BOUNCING ENTRANCES
════════════════════════════════════════════════════ */
.animate-bounce-in { animation: santy-bounce-in 0.75s ease both; }
.animate-bounce-in-from-top { animation: santy-bounce-in-from-top 0.75s ease both; }
.animate-bounce-in-from-bottom { animation: santy-bounce-in-from-bottom 0.75s ease both; }
.animate-bounce-in-from-left { animation: santy-bounce-in-from-left 0.75s ease both; }
.animate-bounce-in-from-right { animation: santy-bounce-in-from-right 0.75s ease both; }
/* ════════════════════════════════════════════════════
BOUNCING EXITS
════════════════════════════════════════════════════ */
.animate-bounce-out { animation: santy-bounce-out 0.75s ease both; }
.animate-bounce-out-to-top { animation: santy-bounce-out-to-top 0.75s ease both; }
.animate-bounce-out-to-bottom { animation: santy-bounce-out-to-bottom 0.75s ease both; }
.animate-bounce-out-to-left { animation: santy-bounce-out-to-left 0.75s ease both; }
.animate-bounce-out-to-right { animation: santy-bounce-out-to-right 0.75s ease both; }
/* ════════════════════════════════════════════════════
SLIDING ENTRANCES
════════════════════════════════════════════════════ */
.animate-slide-in-from-top { animation: santy-slide-in-from-top 0.4s ease both; }
.animate-slide-in-from-bottom { animation: santy-slide-in-from-bottom 0.4s ease both; }
.animate-slide-in-from-left { animation: santy-slide-in-from-left 0.4s ease both; }
.animate-slide-in-from-right { animation: santy-slide-in-from-right 0.4s ease both; }
/* ════════════════════════════════════════════════════
SLIDING EXITS
════════════════════════════════════════════════════ */
.animate-slide-out-to-top { animation: santy-slide-out-to-top 0.4s ease both; }
.animate-slide-out-to-bottom { animation: santy-slide-out-to-bottom 0.4s ease both; }
.animate-slide-out-to-left { animation: santy-slide-out-to-left 0.4s ease both; }
.animate-slide-out-to-right { animation: santy-slide-out-to-right 0.4s ease both; }
/* ════════════════════════════════════════════════════
ZOOMING ENTRANCES
════════════════════════════════════════════════════ */
.animate-zoom-in { animation: santy-zoom-in 0.3s ease both; }
.animate-zoom-in-from-top { animation: santy-zoom-in-from-top 0.5s ease both; }
.animate-zoom-in-from-bottom { animation: santy-zoom-in-from-bottom 0.5s ease both; }
.animate-zoom-in-from-left { animation: santy-zoom-in-from-left 0.5s ease both; }
.animate-zoom-in-from-right { animation: santy-zoom-in-from-right 0.5s ease both; }
/* ════════════════════════════════════════════════════
ZOOMING EXITS
════════════════════════════════════════════════════ */
.animate-zoom-out { animation: santy-zoom-out 0.3s ease both; }
.animate-zoom-out-to-top { animation: santy-zoom-out-to-top 0.5s ease both; }
.animate-zoom-out-to-bottom { animation: santy-zoom-out-to-bottom 0.5s ease both; }
.animate-zoom-out-to-left { animation: santy-zoom-out-to-left 0.5s ease both; }
.animate-zoom-out-to-right { animation: santy-zoom-out-to-right 0.5s ease both; }
/* ════════════════════════════════════════════════════
FLIPPING
════════════════════════════════════════════════════ */
.animate-flip { animation: santy-flip 1s ease both; backface-visibility: visible !important; }
.animate-flip-in-x { animation: santy-flip-in-x 0.75s ease both; backface-visibility: visible !important; }
.animate-flip-in-y { animation: santy-flip-in-y 0.75s ease both; backface-visibility: visible !important; }
.animate-flip-out-x { animation: santy-flip-out-x 0.75s ease both; backface-visibility: visible !important; }
.animate-flip-out-y { animation: santy-flip-out-y 0.75s ease both; backface-visibility: visible !important; }
/* ════════════════════════════════════════════════════
ROTATING ENTRANCES
════════════════════════════════════════════════════ */
.animate-rotate-in { animation: santy-rotate-in 0.6s ease both; }
.animate-rotate-in-from-top-left { animation: santy-rotate-in-from-top-left 0.6s ease both; transform-origin: left top; }
.animate-rotate-in-from-top-right { animation: santy-rotate-in-from-top-right 0.6s ease both; transform-origin: right top; }
.animate-rotate-in-from-bottom-left { animation: santy-rotate-in-from-bottom-left 0.6s ease both; transform-origin: left bottom; }
.animate-rotate-in-from-bottom-right { animation: santy-rotate-in-from-bottom-right 0.6s ease both; transform-origin: right bottom; }
/* ════════════════════════════════════════════════════
ROTATING EXITS
════════════════════════════════════════════════════ */
.animate-rotate-out { animation: santy-rotate-out 0.6s ease both; }
.animate-rotate-out-to-top-left { animation: santy-rotate-out-to-top-left 0.6s ease both; transform-origin: left top; }
.animate-rotate-out-to-top-right { animation: santy-rotate-out-to-top-right 0.6s ease both; transform-origin: right top; }
.animate-rotate-out-to-bottom-left { animation: santy-rotate-out-to-bottom-left 0.6s ease both; transform-origin: left bottom; }
.animate-rotate-out-to-bottom-right { animation: santy-rotate-out-to-bottom-right 0.6s ease both; transform-origin: right bottom; }
/* ════════════════════════════════════════════════════
BACK ENTRANCES (scale from afar)
════════════════════════════════════════════════════ */
.animate-back-in-from-top { animation: santy-back-in-from-top 0.7s ease both; }
.animate-back-in-from-bottom { animation: santy-back-in-from-bottom 0.7s ease both; }
.animate-back-in-from-left { animation: santy-back-in-from-left 0.7s ease both; }
.animate-back-in-from-right { animation: santy-back-in-from-right 0.7s ease both; }
/* ════════════════════════════════════════════════════
BACK EXITS
════════════════════════════════════════════════════ */
.animate-back-out-to-top { animation: santy-back-out-to-top 0.7s ease both; }
.animate-back-out-to-bottom { animation: santy-back-out-to-bottom 0.7s ease both; }
.animate-back-out-to-left { animation: santy-back-out-to-left 0.7s ease both; }
.animate-back-out-to-right { animation: santy-back-out-to-right 0.7s ease both; }
/* ════════════════════════════════════════════════════
LIGHT SPEED (skew + slide)
════════════════════════════════════════════════════ */
.animate-speed-in-from-left { animation: santy-speed-in-from-left 0.5s ease-out both; }
.animate-speed-in-from-right { animation: santy-speed-in-from-right 0.5s ease-out both; }
.animate-speed-out-to-left { animation: santy-speed-out-to-left 0.5s ease-in both; }
.animate-speed-out-to-right { animation: santy-speed-out-to-right 0.5s ease-in both; }
/* ════════════════════════════════════════════════════
SPECIALS
════════════════════════════════════════════════════ */
.animate-hinge { animation: santy-hinge 2s ease both; transform-origin: top left; }
.animate-jack-in-box { animation: santy-jack-in-box 1s ease both; transform-origin: center bottom; }
.animate-roll-in { animation: santy-roll-in 0.6s ease both; }
.animate-roll-out { animation: santy-roll-out 0.6s ease both; }
/* ── Original utilities (kept for backwards compat) ── */
.animate-spin { animation: santy-spin 1s linear infinite; }
.animate-ping { animation: santy-ping 1s cubic-bezier(0,0,.2,1) infinite; }
.animate-pulse { animation: santy-pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
.animate-bounce { animation: santy-bounce 1s infinite; }
.animate-slide-up { animation: santy-slide-in-from-bottom 0.4s ease both; }
.animate-slide-down { animation: santy-slide-in-from-top 0.4s ease both; }
.animate-zoom-in { animation: santy-zoom-in 0.3s ease both; }
.animate-zoom-out { animation: santy-zoom-out 0.3s ease both; }
/* ═══════════════════════════════════════════════════════════════════════
KEYFRAMES
═══════════════════════════════════════════════════════════════════════ */
/* ── Core ── */
@keyframes santy-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes santy-ping { 75%, 100% { transform: scale(2); opacity: 0; } }
@keyframes santy-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes santy-bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8,0,1,1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0,0,.2,1); } }
@keyframes santy-skeleton{ 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
/* ── Attention Seekers ── */
@keyframes santy-flash {
from, 50%, to { opacity: 1; }
25%, 75% { opacity: 0; }
}
@keyframes santy-rubber-band {
from { transform: scale3d(1, 1, 1); }
30% { transform: scale3d(1.25, .75, 1); }
40% { transform: scale3d(.75, 1.25, 1); }
50% { transform: scale3d(1.15, .85, 1); }
65% { transform: scale3d(.95, 1.05, 1); }
75% { transform: scale3d(1.05, .95, 1); }
to { transform: scale3d(1, 1, 1); }
}
@keyframes santy-shake-x {
from, to { transform: translate3d(0, 0, 0); }
10%, 30%, 50%, 70%, 90% { transform: translate3d(-10px, 0, 0); }
20%, 40%, 60%, 80% { transform: translate3d(10px, 0, 0); }
}
@keyframes santy-shake-y {
from, to { transform: translate3d(0, 0, 0); }
10%, 30%, 50%, 70%, 90% { transform: translate3d(0, -10px, 0); }
20%, 40%, 60%, 80% { transform: translate3d(0, 10px, 0); }
}
@keyframes santy-shake-head {
0% { transform: rotateY(0deg); }
6.5% { transform: rotateY(-9deg); }
18.5% { transform: rotateY(7deg); }
31.5% { transform: rotateY(-5deg); }
43.5% { transform: rotateY(3deg); }
50% { transform: rotateY(0deg); }
}
@keyframes santy-swing {
20% { transform: rotate3d(0, 0, 1, 15deg); }
40% { transform: rotate3d(0, 0, 1, -10deg); }
60% { transform: rotate3d(0, 0, 1, 5deg); }
80% { transform: rotate3d(0, 0, 1, -5deg); }
to { transform: rotate3d(0, 0, 1, 0deg); }
}
@keyframes santy-tada {
from { transform: scale3d(1, 1, 1); }
10%, 20% { transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); }
30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
to { transform: scale3d(1, 1, 1); }
}
@keyframes santy-wobble {
from { transform: translate3d(0, 0, 0); }
15% { transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }
30% { transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }
45% { transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
60% { transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
75% { transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
to { transform: translate3d(0, 0, 0); }
}
@keyframes santy-jelly {
from, 11.1%, to { transform: translate3d(0, 0, 0); }
22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); }
33.3% { transform: skewX(6.25deg) skewY(6.25deg); }
44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); }
55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); }
66.6% { transform: skewX(-.78125deg) skewY(-.78125deg); }
77.7% { transform: skewX(.390625deg) skewY(.390625deg); }
88.8% { transform: skewX(-.1953125deg) skewY(-.1953125deg); }
}
@keyframes santy-heartbeat {
from { transform: scale(1); animation-timing-function: ease-out; }
10% { transform: scale(1.12); animation-timing-function: ease-in; }
17% { transform: scale(1.08); animation-timing-function: ease-out; }
33% { transform: scale(1.18); animation-timing-function: ease-in; }
45% { transform: scale(1); animation-timing-function: ease-out; }
}
/* ── Fade In ── */
@keyframes santy-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes santy-fade-in-from-top { from { opacity: 0; transform: translate3d(0, -30px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes santy-fade-in-from-bottom { from { opacity: 0; transform: translate3d(0, 30px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes santy-fade-in-from-left { from { opacity: 0; transform: translate3d(-30px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes santy-fade-in-from-right { from { opacity: 0; transform: translate3d( 30px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes santy-fade-in-top-left { from { opacity: 0; transform: translate3d(-30px, -30px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes santy-fade-in-top-right { from { opacity: 0; transform: translate3d( 30px, -30px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes santy-fade-in-bottom-left { from { opacity: 0; transform: translate3d(-30px, 30px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes santy-fade-in-bottom-right { from { opacity: 0; transform: translate3d( 30px, 30px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
/* ── Fade Out ── */
@keyframes santy-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes santy-fade-out-to-top { from { opacity: 1; transform: translate3d(0, 0, 0); } to { opacity: 0; transform: translate3d(0, -30px, 0); } }
@keyframes santy-fade-out-to-bottom { from { opacity: 1; transform: translate3d(0, 0, 0); } to { opacity: 0; transform: translate3d(0, 30px, 0); } }
@keyframes santy-fade-out-to-left { from { opacity: 1; transform: translate3d(0, 0, 0); } to { opacity: 0; transform: translate3d(-30px, 0, 0); } }
@keyframes santy-fade-out-to-right { from { opacity: 1; transform: translate3d(0, 0, 0); } to { opacity: 0; transform: translate3d( 30px, 0, 0); } }
@keyframes santy-fade-out-top-left { from { opacity: 1; transform: translate3d(0, 0, 0); } to { opacity: 0; transform: translate3d(-30px, -30px, 0); } }
@keyframes santy-fade-out-top-right { from { opacity: 1; transform: translate3d(0, 0, 0); } to { opacity: 0; transform: translate3d( 30px, -30px, 0); } }
@keyframes santy-fade-out-bottom-left { from { opacity: 1; transform: translate3d(0, 0, 0); } to { opacity: 0; transform: translate3d(-30px, 30px, 0); } }
@keyframes santy-fade-out-bottom-right { from { opacity: 1; transform: translate3d(0, 0, 0); } to { opacity: 0; transform: translate3d( 30px, 30px, 0); } }
/* ── Bounce In ── */
@keyframes santy-bounce-in {
from,20%,40%,60%,80%,to { animation-timing-function: cubic-bezier(.215,.61,.355,1); }
0% { opacity: 0; transform: scale3d(.3, .3, .3); }
20% { transform: scale3d(1.1, 1.1, 1.1); }
40% { transform: scale3d(.9, .9, .9); }
60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
80% { transform: scale3d(.97, .97, .97); }
to { opacity: 1; transform: scale3d(1, 1, 1); }
}
@keyframes santy-bounce-in-from-top {
from,60%,75%,90%,to { animation-timing-function: cubic-bezier(.215,.61,.355,1); }
0% { opacity: 0; transform: translate3d(0, -3000px, 0) scaleY(3); }
60% { opacity: 1; transform: translate3d(0, 25px, 0) scaleY(.9); }
75% { transform: translate3d(0, -10px, 0) scaleY(.95); }
90% { transform: translate3d(0, 5px, 0) scaleY(.985); }
to { transform: translate3d(0, 0, 0); }
}
@keyframes santy-bounce-in-from-bottom {
from,60%,75%,90%,to { animation-timing-function: cubic-bezier(.215,.61,.355,1); }
0% { opacity: 0; transform: translate3d(0, 3000px, 0) scaleY(5); }
60% { opacity: 1; transform: translate3d(0, -20px, 0) scaleY(.9); }
75% { transform: translate3d(0, 10px, 0) scaleY(.95); }
90% { transform: translate3d(0, -5px, 0) scaleY(.985); }
to { transform: translate3d(0, 0, 0); }
}
@keyframes santy-bounce-in-from-left {
from,60%,75%,90%,to { animation-timing-function: cubic-bezier(.215,.61,.355,1); }
0% { opacity: 0; transform: translate3d(-3000px, 0, 0) scaleX(3); }
60% { opacity: 1; transform: translate3d(25px, 0, 0) scaleX(1); }
75% { transform: translate3d(-10px, 0, 0) scaleX(.98); }
90% { transform: translate3d(5px, 0, 0) scaleX(.995); }
to { transform: translate3d(0, 0, 0); }
}
@keyframes santy-bounce-in-from-right {
from,60%,75%,90%,to { animation-timing-function: cubic-bezier(.215,.61,.355,1); }
0% { opacity: 0; transform: translate3d(3000px, 0, 0) scaleX(3); }
60% { opacity: 1; transform: translate3d(-25px, 0, 0) scaleX(1); }
75% { transform: translate3d(10px, 0, 0) scaleX(.98); }
90% { transform: translate3d(-5px, 0, 0) scaleX(.995); }
to { transform: translate3d(0, 0, 0); }
}
/* ── Bounce Out ── */
@keyframes santy-bounce-out {
20% { transform: scale3d(.9, .9, .9); }
50%,55% { opacity: 1; transform: scale3d(1.1, 1.1, 1.1); }
to { opacity: 0; transform: scale3d(.3, .3, .3); }
}
@keyframes santy-bounce-out-to-top {
20% { transform: translate3d(0, -10px, 0) scaleY(.985); }
40%,45% { opacity: 1; transform: translate3d(0, 20px, 0) scaleY(.9); }
to { opacity: 0; transform: translate3d(0, -2000px, 0) scaleY(3); }
}
@keyframes santy-bounce-out-to-bottom {
20% { transform: translate3d(0, 10px, 0) scaleY(.985); }
40%,45% { opacity: 1; transform: translate3d(0, -20px, 0) scaleY(.9); }
to { opacity: 0; transform: translate3d(0, 2000px, 0) scaleY(5); }
}
@keyframes santy-bounce-out-to-left {
20% { opacity: 1; transform: translate3d(20px, 0, 0) scaleX(.9); }
to { opacity: 0; transform: translate3d(-2000px, 0, 0) scaleX(2); }
}
@keyframes santy-bounce-out-to-right {
20% { opacity: 1; transform: translate3d(-20px, 0, 0) scaleX(.9); }
to { opacity: 0; transform: translate3d(2000px, 0, 0) scaleX(2); }
}
/* ── Slide In ── */
@keyframes santy-slide-in-from-top { from { visibility: visible; transform: translate3d(0, -100%, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes santy-slide-in-from-bottom { from { visibility: visible; transform: translate3d(0, 100%, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes santy-slide-in-from-left { from { visibility: visible; transform: translate3d(-100%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes santy-slide-in-from-right { from { visibility: visible; transform: translate3d( 100%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
/* ── Slide Out ── */
@keyframes santy-slide-out-to-top { from { transform: translate3d(0, 0, 0); } to { visibility: hidden; transform: translate3d(0, -100%, 0); } }
@keyframes santy-slide-out-to-bottom { from { transform: translate3d(0, 0, 0); } to { visibility: hidden; transform: translate3d(0, 100%, 0); } }
@keyframes santy-slide-out-to-left { from { transform: translate3d(0, 0, 0); } to { visibility: hidden; transform: translate3d(-100%, 0, 0); } }
@keyframes santy-slide-out-to-right { from { transform: translate3d(0, 0, 0); } to { visibility: hidden; transform: translate3d( 100%, 0, 0); } }
/* ── Zoom In ── */
@keyframes santy-zoom-in { from { opacity: 0; transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } }
@keyframes santy-zoom-in-from-top {
from { opacity: 0; transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0); animation-timing-function: cubic-bezier(.55,.055,.675,.19); }
60% { opacity: 1; transform: scale3d(.475,.475,.475) translate3d(0,60px,0); animation-timing-function: cubic-bezier(.175,.885,.32,1); }
}
@keyframes santy-zoom-in-from-bottom {
from { opacity: 0; transform: scale3d(.1,.1,.1) translate3d(0,1000px,0); animation-timing-function: cubic-bezier(.55,.055,.675,.19); }
60% { opacity: 1; transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); animation-timing-function: cubic-bezier(.175,.885,.32,1); }
}
@keyframes santy-zoom-in-from-left {
from { opacity: 0; transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0); animation-timing-function: cubic-bezier(.55,.055,.675,.19); }
60% { opacity: 1; transform: scale3d(.475,.475,.475) translate3d(10px,0,0); animation-timing-function: cubic-bezier(.175,.885,.32,1); }
}
@keyframes santy-zoom-in-from-right {
from { opacity: 0; transform: scale3d(.1,.1,.1) translate3d(1000px,0,0); animation-timing-function: cubic-bezier(.55,.055,.675,.19); }
60% { opacity: 1; transform: scale3d(.475,.475,.475) translate3d(-10px,0,0); animation-timing-function: cubic-bezier(.175,.885,.32,1); }
}
/* ── Zoom Out ── */
@keyframes santy-zoom-out { from { opacity: 1; } 50% { opacity: 0; transform: scale3d(.3,.3,.3); } to { opacity: 0; } }
@keyframes santy-zoom-out-to-top {
40% { opacity: 1; transform: scale3d(.475,.475,.475) translate3d(0,60px,0); animation-timing-function: cubic-bezier(.175,.885,.32,1); }
to { opacity: 0; transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0); animation-timing-function: cubic-bezier(.55,.055,.675,.19); }
}
@keyframes santy-zoom-out-to-bottom {
40% { opacity: 1; transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); animation-timing-function: cubic-bezier(.175,.885,.32,1); }
to { opacity: 0; transform: scale3d(.1,.1,.1) translate3d(0,2000px,0); animation-timing-function: cubic-bezier(.55,.055,.675,.19); }
}
@keyframes santy-zoom-out-to-left {
40% { opacity: 1; transform: scale3d(.475,.475,.475) translate3d(42px,0,0); animation-timing-function: cubic-bezier(.175,.885,.32,1); }
to { opacity: 0; transform: scale3d(.1,.1,.1) translate3d(-2000px,0,0); animation-timing-function: cubic-bezier(.55,.055,.675,.19); }
}
@keyframes santy-zoom-out-to-right {
40% { opacity: 1; transform: scale3d(.475,.475,.475) translate3d(-42px,0,0); animation-timing-function: cubic-bezier(.175,.885,.32,1); }
to { opacity: 0; transform: scale3d(.1,.1,.1) translate3d(2000px,0,0); animation-timing-function: cubic-bezier(.55,.055,.675,.19); }
}
/* ── Flip ── */
@keyframes santy-flip {
from { transform: perspective(400px) scale3d(1,1,1) rotate3d(0,1,0,-360deg); animation-timing-function: ease-out; }
40% { transform: perspective(400px) scale3d(1,1,.5) translate3d(0,0,150px) rotate3d(0,1,0,-190deg); animation-timing-function: ease-out; }
50% { transform: perspective(400px) scale3d(1,1,.5) translate3d(0,0,150px) rotate3d(0,1,0,-170deg); animation-timing-function: ease-in; }
80% { transform: perspective(400px) scale3d(.95,1,1) rotate3d(0,1,0,0deg); animation-timing-function: ease-in; }
to { transform: perspective(400px) scale3d(1,1,1) rotate3d(0,1,0,0deg); animation-timing-function: ease-in; }
}
@keyframes santy-flip-in-x {
from { transform: perspective(400px) rotate3d(1,0,0,90deg); animation-timing-function: ease-in; opacity: 0; }
40% { transform: perspective(400px) rotate3d(1,0,0,-20deg); animation-timing-function: ease-in; }
60% { transform: perspective(400px) rotate3d(1,0,0,10deg); opacity: 1; }
80% { transform: perspective(400px) rotate3d(1,0,0,-5deg); }
to { transform: perspective(400px); }
}
@keyframes santy-flip-in-y {
from { transform: perspective(400px) rotate3d(0,1,0,90deg); animation-timing-function: ease-in; opacity: 0; }
40% { transform: perspective(400px) rotate3d(0,1,0,-20deg); animation-timing-function: ease-in; }
60% { transform: perspective(400px) rotate3d(0,1,0,10deg); opacity: 1; }
80% { transform: perspective(400px) rotate3d(0,1,0,-5deg); }
to { transform: perspective(400px); }
}
@keyframes santy-flip-out-x {
from { transform: perspective(400px); }
30% { transform: perspective(400px) rotate3d(1,0,0,-20deg); opacity: 1; }
to { transform: perspective(400px) rotate3d(1,0,0,90deg); opacity: 0; }
}
@keyframes santy-flip-out-y {
from { transform: perspective(400px); }
30% { transform: perspective(400px) rotate3d(0,1,0,-15deg); opacity: 1; }
to { transform: perspective(400px) rotate3d(0,1,0,90deg); opacity: 0; }
}
/* ── Rotate In ── */
@keyframes santy-rotate-in { from { transform: rotate3d(0,0,1,-200deg); opacity: 0; } to { transform: translate3d(0,0,0); opacity: 1; } }
@keyframes santy-rotate-in-from-top-left { from { transform: rotate3d(0,0,1,-45deg); opacity: 0; } to { transform: translate3d(0,0,0); opacity: 1; } }
@keyframes santy-rotate-in-from-top-right { from { transform: rotate3d(0,0,1,45deg); opacity: 0; } to { transform: translate3d(0,0,0); opacity: 1; } }
@keyframes santy-rotate-in-from-bottom-left { from { transform: rotate3d(0,0,1,45deg); opacity: 0; } to { transform: translate3d(0,0,0); opacity: 1; } }
@keyframes santy-rotate-in-from-bottom-right { from { transform: rotate3d(0,0,1,-90deg); opacity: 0; } to { transform: translate3d(0,0,0); opacity: 1; } }
/* ── Rotate Out ── */
@keyframes santy-rotate-out { from { opacity: 1; } to { transform: rotate3d(0,0,1,200deg); opacity: 0; } }
@keyframes santy-rotate-out-to-top-left { from { opacity: 1; } to { transform: rotate3d(0,0,1,-45deg); opacity: 0; } }
@keyframes santy-rotate-out-to-top-right { from { opacity: 1; } to { transform: rotate3d(0,0,1,90deg); opacity: 0; } }
@keyframes santy-rotate-out-to-bottom-left { from { opacity: 1; } to { transform: rotate3d(0,0,1,45deg); opacity: 0; } }
@keyframes santy-rotate-out-to-bottom-right { from { opacity: 1; } to { transform: rotate3d(0,0,1,-45deg); opacity: 0; } }
/* ── Back Entrances ── */
@keyframes santy-back-in-from-top { 0% { transform: translateY(-1200px) scale(.7); opacity: .7; } 80% { transform: translateY(0) scale(.7); opacity: .7; } 100% { transform: scale(1); opacity: 1; } }
@keyframes santy-back-in-from-bottom { 0% { transform: translateY( 1200px) scale(.7); opacity: .7; } 80% { transform: translateY(0) scale(.7); opacity: .7; } 100% { transform: scale(1); opacity: 1; } }
@keyframes santy-back-in-from-left { 0% { transform: translateX(-2000px) scale(.7); opacity: .7; } 80% { transform: translateX(0) scale(.7); opacity: .7; } 100% { transform: scale(1); opacity: 1; } }
@keyframes santy-back-in-from-right { 0% { transform: translateX( 2000px) scale(.7); opacity: .7; } 80% { transform: translateX(0) scale(.7); opacity: .7; } 100% { transform: scale(1); opacity: 1; } }
/* ── Back Exits ── */
@keyframes santy-back-out-to-top { 0% { transform: scale(1); opacity: 1; } 20% { transform: translateY(0) scale(.7); opacity: .7; } 100% { transform: translateY(-700px) scale(.7); opacity: .7; } }
@keyframes santy-back-out-to-bottom { 0% { transform: scale(1); opacity: 1; } 20% { transform: translateY(0) scale(.7); opacity: .7; } 100% { transform: translateY( 700px) scale(.7); opacity: .7; } }
@keyframes santy-back-out-to-left { 0% { transform: scale(1); opacity: 1; } 20% { transform: translateX(0) scale(.7); opacity: .7; } 100% { transform: translateX(-2000px) scale(.7); opacity: .7; } }
@keyframes santy-back-out-to-right { 0% { transform: scale(1); opacity: 1; } 20% { transform: translateX(0) scale(.7); opacity: .7; } 100% { transform: translateX( 2000px) scale(.7); opacity: .7; } }
/* ── Light Speed ── */
@keyframes santy-speed-in-from-left { from { transform: translate3d(-100%,0,0) skewX(30deg); opacity: 0; } 60% { transform: skewX(-20deg); opacity: 1; } 80% { transform: skewX(5deg); } to { transform: translate3d(0,0,0); } }
@keyframes santy-speed-in-from-right { from { transform: translate3d(100%,0,0) skewX(-30deg); opacity: 0; } 60% { transform: skewX(20deg); opacity: 1; } 80% { transform: skewX(-5deg); } to { transform: translate3d(0,0,0); } }
@keyframes santy-speed-out-to-left { from { opacity: 1; } to { transform: translate3d(-100%,0,0) skewX(-30deg); opacity: 0; } }
@keyframes santy-speed-out-to-right { from { opacity: 1; } to { transform: translate3d(100%,0,0) skewX(30deg); opacity: 0; } }
/* ── Specials ── */
@keyframes santy-hinge {
0% { animation-timing-function: ease-in-out; }
20%,60% { transform: rotate3d(0,0,1,80deg); animation-timing-function: ease-in-out; }
40%,80% { transform: rotate3d(0,0,1,60deg); animation-timing-function: ease-in-out; opacity: 1; }
to { transform: translate3d(0,700px,0); opacity: 0; }
}
@keyframes santy-jack-in-box {
from { opacity: 0; transform: scale(.1) rotate(30deg); }
50% { transform: rotate(-10deg); }
70% { transform: rotate(3deg); }
to { opacity: 1; transform: scale(1); }
}
@keyframes santy-roll-in { from { opacity: 0; transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg); } to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes santy-roll-out { from { opacity: 1; } to { opacity: 0; transform: translate3d(100%,0,0) rotate3d(0,0,1,120deg); } }
/* ═══════════════════════════════════════════════════════════════════════
SCROLL-TRIGGERED ANIMATIONS
Uses Intersection Observer via tiny JS snippet OR animation-timeline.
Add class + JS observer, or use with animate-on-scroll-* pattern.
Pure CSS fallback: elements start invisible, JS adds .is-visible.
═══════════════════════════════════════════════════════════════════════ */
/* Base: elements are hidden until .is-visible is toggled by JS */
.animate-on-scroll-fade-in { opacity: 0; transition: opacity 0.6s ease, transform 0.6s ease; }
.animate-on-scroll-slide-up { opacity: 0; transform: translateY(40px); transition: opacity 0.6s ease, transform 0.6s ease; }
.animate-on-scroll-slide-down { opacity: 0; transform: translateY(-40px); transition: opacity 0.6s ease, transform 0.6s ease; }
.animate-on-scroll-zoom-in { opacity: 0; transform: scale(0.85); transition: opacity 0.6s ease, transform 0.6s ease; }
.animate-on-scroll-from-left { opacity: 0; transform: translateX(-60px); transition: opacity 0.6s ease, transform 0.6s ease; }
.animate-on-scroll-from-right { opacity: 0; transform: translateX(60px); transition: opacity 0.6s ease, transform 0.6s ease; }
.animate-on-scroll-flip-up { opacity: 0; transform: rotateX(30deg); transition: opacity 0.6s ease, transform 0.6s ease; }
/* Triggered state — add .is-visible via IntersectionObserver */
.animate-on-scroll-fade-in.is-visible,
.animate-on-scroll-slide-up.is-visible,
.animate-on-scroll-slide-down.is-visible,
.animate-on-scroll-zoom-in.is-visible,
.animate-on-scroll-from-left.is-visible,
.animate-on-scroll-from-right.is-visible,
.animate-on-scroll-flip-up.is-visible { opacity: 1; transform: none; }
/* scroll-reveal-once / scroll-reveal-repeat — same trigger, different JS behaviour */
.scroll-reveal-once,
.scroll-reveal-repeat { opacity: 0; transform: translateY(30px); transition: opacity 0.55s ease, transform 0.55s ease; }
.scroll-reveal-once.is-visible,
.scroll-reveal-repeat.is-visible { opacity: 1; transform: none; }
/* Delay modifiers for scroll reveals */
.scroll-reveal-delay-100 { transition-delay: 0.1s; }
.scroll-reveal-delay-200 { transition-delay: 0.2s; }
.scroll-reveal-delay-300 { transition-delay: 0.3s; }
.scroll-reveal-delay-400 { transition-delay: 0.4s; }
.scroll-reveal-delay-500 { transition-delay: 0.5s; }
/* ═══════════════════════════════════════════════════════════════════════
HOVER-TRIGGERED ANIMATIONS
These override animation only on :hover so they fire on mouse-over.
═══════════════════════════════════════════════════════════════════════ */
.on-hover\:animate-bounce:hover { animation: santy-bounce 0.8s ease both; }
.on-hover\:animate-pulse:hover { animation: santy-pulse 1s ease both; }
.on-hover\:animate-shake-x:hover { animation: santy-shake-x 0.6s ease both; }
.on-hover\:animate-rubber-band:hover { animation: santy-rubber-band 0.8s ease both; }
.on-hover\:animate-tada:hover { animation: santy-tada 0.8s ease both; }
.on-hover\:animate-wobble:hover { animation: santy-wobble 0.8s ease both; }
.on-hover\:animate-swing:hover { animation: santy-swing 0.8s ease both; transform-origin: top center; }
.on-hover\:animate-heartbeat:hover { animation: santy-heartbeat 1s ease-in-out both; }
.on-hover\:animate-spin-once:hover { animation: santy-spin 0.5s linear both; }
.on-hover\:animate-flip-once:hover { animation: santy-flip-in-y 0.6s ease both; }
.on-hover\:animate-jello:hover { animation: santy-jelly 0.9s ease both; }
.on-hover\:animate-zoom-in:hover { animation: santy-zoom-in 0.3s ease both; }
.on-hover\:animate-fade-in:hover { animation: santy-fade-in 0.4s ease both; }
/* ═══════════════════════════════════════════════════════════════════════
TEXT ANIMATIONS
═══════════════════════════════════════════════════════════════════════ */
/* Typewriter — pure CSS using steps() */
.animate-typewriter {
overflow: hidden;
white-space: nowrap;
border-right: 2px solid currentColor;
width: 0;
animation: santy-typewriter 2.5s steps(30,end) forwards, santy-blink-caret 0.75s step-end infinite;
}
/* Blur-in entrance */
.animate-text-blur-in { animation: santy-text-blur-in 0.8s ease both; }
/* Slide up per-word (apply to the text container) */
.animate-text-slide-up { animation: santy-slide-up 0.5s ease both; }
/* Gradient flow — animated gradient on text */
.animate-text-gradient-flow {
background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899, #3b82f6);
background-size: 300% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: santy-gradient-shift 3s linear infinite;
}
/* Letter wave — each letter must be wrapped in a span via JS */
.animate-text-wave span { display: inline-block; animation: santy-text-wave 1s ease infinite; }
.animate-text-wave span:nth-child(1) { animation-delay: 0s; }
.animate-text-wave span:nth-child(2) { animation-delay: 0.08s; }
.animate-text-wave span:nth-child(3) { animation-delay: 0.16s; }
.animate-text-wave span:nth-child(4) { animation-delay: 0.24s; }
.animate-text-wave span:nth-child(5) { animation-delay: 0.32s; }
.animate-text-wave span:nth-child(6) { animation-delay: 0.40s; }
.animate-text-wave span:nth-child(7) { animation-delay: 0.48s; }
.animate-text-wave span:nth-child(8) { animation-delay: 0.56s; }
/* Glitch */
.animate-text-glitch { animation: santy-text-glitch 0.5s linear infinite; }
/* Neon pulse */
.animate-text-neon-pulse { animation: santy-neon-pulse 1.5s ease-in-out infinite alternate; }
@keyframes santy-typewriter { to { width: 100%; } }
@keyframes santy-blink-caret { 50% { border-color: transparent; } }
@keyframes santy-text-blur-in { from { filter: blur(12px); opacity: 0; } to { filter: blur(0); opacity: 1; } }
@keyframes santy-text-wave { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes santy-text-glitch {
0%,100% { text-shadow: none; transform: none; }
20% { text-shadow: -2px 0 #ff00c1, 2px 0 #00fff9; transform: skewX(-2deg); }
40% { text-shadow: 2px 0 #ff00c1, -2px 0 #00fff9; transform: skewX(2deg); }
60% { text-shadow: -2px 0 #00fff9; transform: skewX(0deg); }
80% { text-shadow: 2px 0 #ff00c1; }
}
@keyframes santy-neon-pulse {
from { text-shadow: 0 0 4px currentColor, 0 0 10px currentColor; }
to { text-shadow: 0 0 8px currentColor, 0 0 20px currentColor, 0 0 40px currentColor; }
}
/* ═══════════════════════════════════════════════════════════════════════
STAGGERED ENTRANCE SEQUENCES
Apply parent class; children get incremental delays via nth-child.
═══════════════════════════════════════════════════════════════════════ */
.animate-stagger-fade-in > * { animation: santy-fade-in 0.5s ease both; }
.animate-stagger-slide-up > * { animation: santy-slide-up 0.5s ease both; }
.animate-stagger-zoom-in > * { animation: santy-zoom-in 0.4s ease both; }
.animate-stagger-from-left > * { animation: santy-fade-in-from-left 0.5s ease both; }
.animate-stagger-from-right > * { animation: santy-fade-in-from-right 0.5s ease both; }
/* Delay each child — 100ms steps */
.animate-stagger-children-100 > *:nth-child(1) { animation-delay: 0.0s; }
.animate-stagger-children-100 > *:nth-child(2) { animation-delay: 0.1s; }
.animate-stagger-children-100 > *:nth-child(3) { animation-delay: 0.2s; }
.animate-stagger-children-100 > *:nth-child(4) { animation-delay: 0.3s; }
.animate-stagger-children-100 > *:nth-child(5) { animation-delay: 0.4s; }
.animate-stagger-children-100 > *:nth-child(6) { animation-delay: 0.5s; }
.animate-stagger-children-100 > *:nth-child(7) { animation-delay: 0.6s; }
.animate-stagger-children-100 > *:nth-child(8) { animation-delay: 0.7s; }
.animate-stagger-children-100 > *:nth-child(9) { animation-delay: 0.8s; }
.animate-stagger-children-100 > *:nth-child(10) { animation-delay: 0.9s; }
/* 200ms steps */
.animate-stagger-children-200 > *:nth-child(1) { animation-delay: 0.0s; }
.animate-stagger-children-200 > *:nth-child(2) { animation-delay: 0.2s; }
.animate-stagger-children-200 > *:nth-child(3) { animation-delay: 0.4s; }
.animate-stagger-children-200 > *:nth-child(4) { animation-delay: 0.6s; }
.animate-stagger-children-200 > *:nth-child(5) { animation-delay: 0.8s; }
.animate-stagger-children-200 > *:nth-child(6) { animation-delay: 1.0s; }
.animate-stagger-children-200 > *:nth-child(7) { animation-delay: 1.2s; }
.animate-stagger-children-200 > *:nth-child(8) { animation-delay: 1.4s; }
/* 300ms steps */
.animate-stagger-children-300 > *:nth-child(1) { animation-delay: 0.0s; }
.animate-stagger-children-300 > *:nth-child(2) { animation-delay: 0.3s; }
.animate-stagger-children-300 > *:nth-child(3) { animation-delay: 0.6s; }
.animate-stagger-children-300 > *:nth-child(4) { animation-delay: 0.9s; }
.animate-stagger-children-300 > *:nth-child(5) { animation-delay: 1.2s; }
.animate-stagger-children-300 > *:nth-child(6) { animation-delay: 1.5s; }
/* ═══════════════════════════════════════════════════════════════════════
MORPHING & SHAPE ANIMATIONS
═══════════════════════════════════════════════════════════════════════ */
.animate-morph-blob { animation: santy-morph-blob 6s ease-in-out infinite; }
.animate-border-spin { animation: santy-border-spin 2s linear infinite; background: conic-gradient(from 0deg, #3b82f6, #8b5cf6, #ec4899, #3b82f6); }
.animate-shimmer { overflow: hidden; position: relative; background: #f0f0f0; }
.animate-shimmer::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.7) 50%, transparent 100%);
animation: santy-shimmer 1.5s ease-in-out infinite;
}
.animate-gradient-shift { background-size: 200% 200%; animation: santy-gradient-shift 3s ease infinite; }
.animate-morph-circle-to-square { animation: santy-morph-circle-to-square 1.5s ease-in-out infinite alternate; }
.animate-liquid { animation: santy-liquid 3s ease-in-out infinite; }
@keyframes santy-morph-blob {
0%,100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
50% { border-radius: 50% 60% 30% 60% / 40% 50% 60% 50%; }
75% { border-radius: 40% 70% 60% 30% / 60% 40% 50% 70%; }
}
@keyframes santy-border-spin { to { transform: rotate(360deg); } }
@keyframes santy-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes santy-gradient-shift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes santy-morph-circle-to-square { from { border-radius: 50%; } to { border-radius: 0%; } }
@keyframes santy-liquid {
0%,100% { border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%; transform: rotate(0deg); }
50% { border-radius: 60% 40% 30% 70% / 40% 60% 30% 60%; transform: rotate(5deg); }
}
/* ═══════════════════════════════════════════════════════════════════════
3D ANIMATIONS
═══════════════════════════════════════════════════════════════════════ */
.animate-flip-3d-x { animation: santy-flip-3d-x 0.7s ease both; }
.animate-flip-3d-y { animation: santy-flip-3d-y 0.7s ease both; }
.animate-rotate-3d { animation: santy-rotate-3d 1.2s linear infinite; }
.animate-tilt-left { animation: santy-tilt-left 0.4s ease both; }
.animate-tilt-right { animation: santy-tilt-right 0.4s ease both; }
.animate-depth-in { animation: santy-depth-in 0.5s ease both; }
.animate-depth-out { animation: santy-depth-out 0.5s ease both; }
.animate-swing-3d { animation: santy-swing-3d 1s ease-in-out infinite; transform-origin: top center; perspective: 400px; }
@keyframes santy-flip-3d-x { from { transform: perspective(400px) rotateX(90deg); opacity: 0; } to { transform: perspective(400px) rotateX(0deg); opacity: 1; } }
@keyframes santy-flip-3d-y { from { transform: perspective(400px) rotateY(90deg); opacity: 0; } to { transform: perspective(400px) rotateY(0deg); opacity: 1; } }
@keyframes santy-rotate-3d { from { transform: perspective(400px) rotate3d(1,1,0,0deg); } to { transform: perspective(400px) rotate3d(1,1,0,360deg); } }
@keyframes santy-tilt-left { from { transform: rotate(0deg); } to { transform: rotate(-6deg); } }
@keyframes santy-tilt-right { from { transform: rotate(0deg); } to { transform: rotate(6deg); } }
@keyframes santy-depth-in { from { transform: perspective(600px) translateZ(-80px); opacity: 0; } to { transform: perspective(600px) translateZ(0); opacity: 1; } }
@keyframes santy-depth-out { from { transform: perspective(600px) translateZ(0); opacity: 1; } to { transform: perspective(600px) translateZ(-80px); opacity: 0; } }
@keyframes santy-swing-3d {
0%,100% { transform: perspective(400px) rotateY(0deg); }
25% { transform: perspective(400px) rotateY(15deg); }
75% { transform: perspective(400px) rotateY(-15deg); }
}
/* ═══════════════════════════════════════════════════════════════════════
EX