@theme{ --smaller-scale: .8; --larger-scale: 1.2; --pump-amount: 1.1; --pump-soft-amount: 1.05; --pump-hard-amount: 1.2; --pump-x-amount: 1.1; --pump-y-amount: 1.1; --pump-bounce-amount: 1.15; --blur-amount: 8px; --slide-amount: 20px; --slide-amount-negative: calc(-1 * var(--slide-amount)); --rotation: 10deg; --rotation-negative: calc(-1 * var(--rotation)); --small-rotation: calc(.5 * var(--rotation)); --small-rotation-negative: calc(-1 * var(--small-rotation)); --shake-amount: 5px; --shake-amount-negative: calc(-1 * var(--shake-amount)); --movement-distance: 10px; --fade-scale: .95; --rolled-degree: 360deg; --rolled-degree-negative: calc(-1 * var(--rolled-degree)); --rolled-distance: 100%; --rolled-distance-negative: calc(-1 * var(--rolled-distance)); }@theme{ --animate-blur: from-blur .5s ease-in-out; --animate-to-blur: from-blur .5s ease-in-out reverse; --animate-blur-pulse: blur-pulse 1.5s ease-in-out infinite; --animate-blur-flash: blur-flash .8s ease-in-out; }@keyframes from-blur{0%{filter:blur(var(--blur-amount))}to{filter:blur(0)}}@keyframes blur-pulse{0%,to{filter:blur(var(--blur-amount))}50%{filter:blur(0)}}@keyframes blur-flash{0%{filter:blur(var(--blur-amount));opacity:0}50%{filter:blur(0);opacity:1}to{filter:blur(var(--blur-amount));opacity:0}}@theme{ --animate-fade-in: fade-in .3s ease-out; --animate-fade-out: fade-out .3s ease-in; --animate-fade-in-down: fade-in-down .3s ease-out; --animate-fade-out-up: fade-out-up .3s ease-in; --animate-fade-in-up: fade-in-up .3s ease-out; --animate-fade-out-down: fade-out-down .3s ease-in; --animate-fade-in-left: fade-in-left .3s ease-out; --animate-fade-out-right: fade-out-right .3s ease-in; --animate-fade-in-right: fade-in-right .3s ease-out; --animate-fade-out-left: fade-out-left .3s ease-in; --animate-fade-in-scale: fade-in-scale .3s ease-out; --animate-fade-out-scale: fade-out-scale .3s ease-in; --animate-fade-in-rotate: fade-in-rotate .3s ease-out; --animate-fade-out-rotate: fade-out-rotate .3s ease-in; }@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes fade-in-down{0%{opacity:0;transform:translateY(var(--movement-distance))}to{opacity:1;transform:translateY(0)}}@keyframes fade-out-up{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(var(--movement-distance))}}@keyframes fade-in-up{0%{opacity:0;transform:translateY(calc(-1 * var(--movement-distance)))}to{opacity:1;transform:translateY(0)}}@keyframes fade-out-down{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(calc(-1 * var(--movement-distance)))}}@keyframes fade-in-left{0%{opacity:0;transform:translate(var(--movement-distance))}to{opacity:1;transform:translate(0)}}@keyframes fade-out-right{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(var(--movement-distance))}}@keyframes fade-in-right{0%{opacity:0;transform:translate(calc(-1 * var(--movement-distance)))}to{opacity:1;transform:translate(0)}}@keyframes fade-out-left{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(calc(-1 * var(--movement-distance)))}}@keyframes fade-in-scale{0%{opacity:0;transform:scale(var(--fade-scale))}to{opacity:1;transform:scale(1)}}@keyframes fade-out-scale{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(var(--fade-scale))}}@keyframes fade-in-rotate{0%{opacity:0;transform:rotate(var(--rotation))}to{opacity:1;transform:rotate(0)}}@keyframes fade-out-rotate{0%{opacity:1;transform:rotate(0)}to{opacity:0;transform:rotate(var(--rotation))}}@theme{ --animate-flip-x: flip-x .6s ease-in-out; --animate-flip-y: flip-y .6s ease-in-out; --animate-to-flip-x: flip-x .6s ease-in-out reverse; --animate-to-flip-y: flip-y .6s ease-in-out reverse; --animate-flip-pulse: flip-pulse 1.2s ease-in-out infinite; --animate-flip-flash-x: flip-flash-x .8s ease-in-out; --animate-flip-flash-y: flip-flash-y .8s ease-in-out; }@keyframes flip-x{0%{transform:perspective(400px) rotateX(0)}to{transform:perspective(400px) rotateX(180deg)}}@keyframes flip-y{0%{transform:perspective(400px) rotateY(0)}to{transform:perspective(400px) rotateY(180deg)}}@keyframes flip-pulse{0%,to{transform:perspective(400px) rotateY(0)}50%{transform:perspective(400px) rotateY(180deg)}}@keyframes flip-flash-x{0%{transform:perspective(400px) rotateX(0);opacity:0}50%{transform:perspective(400px) rotateX(180deg);opacity:1}to{transform:perspective(400px) rotateX(0);opacity:0}}@keyframes flip-flash-y{0%{transform:perspective(400px) rotateY(0);opacity:0}50%{transform:perspective(400px) rotateY(180deg);opacity:1}to{transform:perspective(400px) rotateY(0);opacity:0}}@theme{ --animate-grow-complete: grow-complete .3s ease-out; --animate-grow-out-complete: grow-out-complete .3s ease-in; --animate-grow: grow .3s ease-out; --animate-grow-x: grow-x .5s ease-out; --animate-grow-y: grow-y .5s ease-out; --animate-grow-out: grow-out .3s ease-in; --animate-grow-out-x: grow-out-x .5s ease-in; --animate-grow-out-y: grow-out-y .5s ease-in; --animate-grow-x-in-left: grow-x-in-left .3s ease-out; --animate-grow-x-in-right: grow-x-in-right .3s ease-out; --animate-grow-y-in-top: grow-y-in-top .3s ease-out; --animate-grow-y-in-bottom: grow-y-in-bottom .3s ease-out; --animate-grow-x-out-left: grow-x-out-left .3s ease-in; --animate-grow-x-out-right: grow-x-out-right .3s ease-in; --animate-grow-y-out-top: grow-y-out-top .3s ease-in; --animate-grow-y-out-bottom: grow-y-out-bottom .3s ease-in; }@keyframes grow-complete{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes grow-out-complete{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes grow{0%{transform:scale(var(--smaller-scale))}to{transform:scale(1)}}@keyframes grow-x{0%{transform:scaleX(var(--smaller-scale))}to{transform:scaleX(1)}}@keyframes grow-y{0%{transform:scaleY(var(--smaller-scale))}to{transform:scaleY(1)}}@keyframes grow-out{0%{transform:scale(1)}to{transform:scale(var(--smaller-scale))}}@keyframes grow-out-x{0%{transform:scaleX(1)}to{transform:scaleX(var(--smaller-scale))}}@keyframes grow-out-y{0%{transform:scaleY(1)}to{transform:scaleY(var(--smaller-scale))}}@keyframes grow-x-in-left{0%{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}@keyframes grow-x-in-right{0%{transform:scaleX(0);transform-origin:right}to{transform:scaleX(1);transform-origin:right}}@keyframes grow-y-in-top{0%{transform:scaleY(0);transform-origin:top}to{transform:scaleY(1);transform-origin:top}}@keyframes grow-y-in-bottom{0%{transform:scaleY(0);transform-origin:bottom}to{transform:scaleY(1);transform-origin:bottom}}@keyframes grow-x-out-left{0%{transform:scaleX(1);transform-origin:left}to{transform:scaleX(0);transform-origin:left}}@keyframes grow-x-out-right{0%{transform:scaleX(1);transform-origin:right}to{transform:scaleX(0);transform-origin:right}}@keyframes grow-y-out-top{0%{transform:scaleY(1);transform-origin:top}to{transform:scaleY(0);transform-origin:top}}@keyframes grow-y-out-bottom{0%{transform:scaleY(1);transform-origin:bottom}to{transform:scaleY(0);transform-origin:bottom}}@theme{ --animate-pump: pump 2s ease-in-out infinite; --animate-pump-soft: pump-soft 2s ease-in-out infinite; --animate-pump-hard: pump-hard 2s ease-in-out infinite; --animate-pump-fast: pump 1s ease-in-out infinite; --animate-pump-slow: pump 3s ease-in-out infinite; --animate-pump-x: pump-x 2s ease-in-out infinite; --animate-pump-y: pump-y 2s ease-in-out infinite; --animate-pump-bounce: pump-bounce 2s cubic-bezier(.25, .8, .25, 1) infinite; }@keyframes pump{0%,to{transform:scale(1);opacity:1}50%{transform:scale(var(--pump-amount, 1.1));opacity:.8}}@keyframes pump-soft{0%,to{transform:scale(1)}50%{transform:scale(var(--pump-soft-amount, 1.05))}}@keyframes pump-hard{0%,to{transform:scale(1)}50%{transform:scale(var(--pump-hard-amount, 1.2))}}@keyframes pump-x{0%,to{transform:scaleX(1)}50%{transform:scaleX(var(--pump-x-amount, 1.1))}}@keyframes pump-y{0%,to{transform:scaleY(1)}50%{transform:scaleY(var(--pump-y-amount, 1.1))}}@keyframes pump-bounce{0%,to{transform:scale(1)}50%{transform:scale(var(--pump-bounce-amount, 1.15))}}@theme{ --animate-shake: shake 2s ease-in-out; --animate-shake-x: shake-x .5s ease-in-out; --animate-shake-y: shake-y .5s ease-in-out; }@keyframes shake{0%,to{transform:translate(0)}10%{transform:translate(var(--shake-amount-negative, -5px)) translateY(var(--shake-y-amount-negative, -5px))}20%{transform:translate(var(--shake-amount, 5px)) translateY(var(--shake-y-amount-negative, -5px))}30%{transform:translate(var(--shake-amount-negative, -5px)) translateY(var(--shake-y-amount, 5px))}40%{transform:translate(var(--shake-amount, 5px)) translateY(var(--shake-y-amount, 5px))}50%{transform:translate(var(--shake-amount-negative, -5px)) translateY(var(--shake-y-amount, 5px))}60%{transform:translate(var(--shake-amount, 5px)) translateY(var(--shake-y-amount-negative, -5px))}70%{transform:translate(var(--shake-amount-negative, -5px)) translateY(var(--shake-y-amount-negative, -5px))}80%{transform:translate(var(--shake-amount, 5px)) translateY(var(--shake-y-amount, 5px))}90%{transform:translate(var(--shake-amount-negative, -5px)) translateY(var(--shake-y-amount-negative, -5px))}}@keyframes shake-x{0%,to{transform:translate(0)}25%{transform:translate(var(--shake-amount-negative, -5px))}50%{transform:translate(var(--shake-amount, 5px))}75%{transform:translate(var(--shake-amount-negative, -5px))}}@keyframes shake-y{0%,to{transform:translateY(0)}25%{transform:translateY(var(--shake-amount-negative, -5px))}50%{transform:translateY(var(--shake-amount, 5px))}75%{transform:translateY(var(--shake-amount-negative, -5px))}}@theme{ --animate-shrink: shrink .2s ease-in-out; --animate-shrink-out: shrink-out .2s ease-in-out; --animate-shrink-x: shrink-x .2s ease-in-out; --animate-shrink-y: shrink-y .2s ease-in-out; @keyframes shrink { from { transform: scale(var(--larger-scale)); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes shrink-out { from { transform: scale(1); opacity: 1; } to { transform: scale(var(--smaller-scale)); opacity: 0; } } @keyframes shrink-x { from { transform: scaleX(1); } to { transform: scaleX(var(--larger-scale)); } } @keyframes shrink-y { from { transform: scaleY(1); } to { transform: scaleY(var(--larger-scale)); } } }@theme{ --animate-slide-in-right: slide-in-right .3s ease-in-out; --animate-slide-in-left: slide-in-left .3s ease-in-out; --animate-slide-in-top: slide-in-top .3s ease-in-out; --animate-slide-in-bottom: slide-in-bottom .3s ease-in-out; --animate-slide-out-right: slide-out-right .3s ease-in-out; --animate-slide-out-left: slide-out-left .3s ease-in-out; --animate-slide-out-top: slide-out-top .3s ease-in-out; --animate-slide-out-bottom: slide-out-bottom .3s ease-in-out; }@keyframes slide-in-right{0%{opacity:0;transform:translate(var(--slide-amount-negative))}to{opacity:1;transform:translate(0)}}@keyframes slide-in-left{0%{opacity:0;transform:translate(var(--slide-amount))}to{opacity:1;transform:translate(0)}}@keyframes slide-in-top{0%{opacity:0;transform:translateY(var(--slide-amount-negative))}to{opacity:1;transform:translateY(0)}}@keyframes slide-in-bottom{0%{opacity:0;transform:translateY(var(--slide-amount))}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-right{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(var(--slide-amount))}}@keyframes slide-out-left{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(var(--slide-amount-negative))}}@keyframes slide-out-top{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(var(--slide-amount-negative))}}@keyframes slide-out-bottom{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(var(--slide-amount))}}@theme{ --animate-roll-left: roll-left .8s ease-in-out; --animate-roll-right: roll-right .8s ease-in-out; --animate-to-roll-left: roll-left .8s ease-in-out reverse; --animate-to-roll-right: roll-right .8s ease-in-out reverse; --animate-roll-pulse: roll-pulse 1.5s infinite; --animate-roll-flash: roll-flash .8s ease-in-out; }@keyframes roll-left{0%{transform:translate(0) rotate(0);opacity:1}to{transform:translate(var(--rolled-distance-negative)) rotate(var(--rolled-degree));opacity:0}}@keyframes roll-right{0%{transform:translate(0) rotate(0);opacity:1}to{transform:translate(var(--rolled-distance)) rotate(var(--rolled-degree));opacity:0}}@keyframes roll-pulse{0%{transform:rotate(0)}25%{transform:rotate(var(--rolled-degree))}50%{transform:rotate(0)}75%{transform:rotate(var(--rolled-degree-negative))}}@keyframes roll-flash{0%{transform:rotate(0);opacity:0}50%{transform:rotate(var(--rolled-degree));opacity:1}to{transform:rotate(0);opacity:0}}@theme{ --animate-wiggle: wiggle 1s ease-out; --animate-wiggle-hard: wiggle-hard .5s ease-out; --animate-wiggle-soft: wiggle-soft 2s ease-out; }@keyframes wiggle{0%,to{transform:rotate(0)}33%{transform:rotate(var(--rotation))}66%{transform:rotate(var(--rotation-negative))}}@keyframes wiggle-hard{0%,to{transform:rotate(0)}33%{transform:rotate(calc(2 * var(--rotation)))}66%{transform:rotate(calc(2 * var(--rotation-negative)))}}@keyframes wiggle-soft{0%,to{transform:rotate(0)}33%{transform:rotate(var(--small-rotation))}66%{transform:rotate(var(--small-rotation-negative))}}