/** * TailwindCSS v4.0 compatible replacement for `tailwindcss-animate`. * * @author Luca Bosin * @license MIT */ :root { /* @property declarations for animation variables, to prevent inheritance */ @property --tw-animation-delay { syntax: "*"; inherits: false; initial-value: 0s; } @property --tw-animation-direction { syntax: "*"; inherits: false; initial-value: normal; } @property --tw-animation-duration { syntax: "*"; inherits: false; /* does not have an initial value in order for the `--tw-duration` variable to work */ } @property --tw-animation-fill-mode { syntax: "*"; inherits: false; initial-value: none; } @property --tw-animation-iteration-count { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-enter-blur { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-enter-opacity { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-enter-rotate { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-enter-scale { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-enter-translate-x { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-enter-translate-y { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-exit-blur { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-exit-opacity { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-exit-rotate { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-exit-scale { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-exit-translate-x { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-exit-translate-y { syntax: "*"; inherits: false; initial-value: 0; } } @theme inline { /* Predefined values */ --animation-delay-0: 0s; --animation-delay-75: 75ms; --animation-delay-100: 0.1s; --animation-delay-150: 0.15s; --animation-delay-200: 0.2s; --animation-delay-300: 0.3s; --animation-delay-500: 0.5s; --animation-delay-700: 0.7s; --animation-delay-1000: 1s; --animation-repeat-0: 0; --animation-repeat-1: 1; --animation-repeat-infinite: infinite; --animation-direction-normal: normal; --animation-direction-reverse: reverse; --animation-direction-alternate: alternate; --animation-direction-alternate-reverse: alternate-reverse; --animation-fill-mode-none: none; --animation-fill-mode-forwards: forwards; --animation-fill-mode-backwards: backwards; --animation-fill-mode-both: both; --percentage-0: 0; --percentage-5: 0.05; --percentage-10: 0.1; --percentage-15: 0.15; --percentage-20: 0.2; --percentage-25: 0.25; --percentage-30: 0.3; --percentage-35: 0.35; --percentage-40: 0.4; --percentage-45: 0.45; --percentage-50: 0.5; --percentage-55: 0.55; --percentage-60: 0.6; --percentage-65: 0.65; --percentage-70: 0.7; --percentage-75: 0.75; --percentage-80: 0.8; --percentage-85: 0.85; --percentage-90: 0.9; --percentage-95: 0.95; --percentage-100: 1; --percentage-translate-full: 1; /* Animations and keyframes */ --animate-in: enter var(--tw-animation-duration, var(--tw-duration, 150ms)) var(--tw-ease, ease) var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1) var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none); --animate-out: exit var(--tw-animation-duration, var(--tw-duration, 150ms)) var(--tw-ease, ease) var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1) var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none); @keyframes enter { from { opacity: var(--tw-enter-opacity, 1); transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0)); filter: blur(var(--tw-enter-blur, 0)); } } @keyframes exit { to { opacity: var(--tw-exit-opacity, 1); transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0)); filter: blur(var(--tw-exit-blur, 0)); } } --animate-accordion-down: accordion-down var(--tw-animation-duration, var(--tw-duration, 200ms)) var(--tw-ease, ease-out) var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1) var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none); --animate-accordion-up: accordion-up var(--tw-animation-duration, var(--tw-duration, 200ms)) var(--tw-ease, ease-out) var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1) var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none); --animate-collapsible-down: collapsible-down var(--tw-animation-duration, var(--tw-duration, 200ms)) var(--tw-ease, ease-out) var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1) var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none); --animate-collapsible-up: collapsible-up var(--tw-animation-duration, var(--tw-duration, 200ms)) var(--tw-ease, ease-out) var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1) var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none); @keyframes accordion-down { from { height: 0; } to { height: var( --radix-accordion-content-height, var( --bits-accordion-content-height, var(--reka-accordion-content-height, var(--kb-accordion-content-height, var(--ngp-accordion-content-height, auto))) ) ); } } @keyframes accordion-up { from { height: var( --radix-accordion-content-height, var( --bits-accordion-content-height, var(--reka-accordion-content-height, var(--kb-accordion-content-height, var(--ngp-accordion-content-height, auto))) ) ); } to { height: 0; } } @keyframes collapsible-down { from { height: 0; } to { height: var( --radix-collapsible-content-height, var( --bits-collapsible-content-height, var(--reka-collapsible-content-height, var(--kb-collapsible-content-height, auto)) ) ); } } @keyframes collapsible-up { from { height: var( --radix-collapsible-content-height, var( --bits-collapsible-content-height, var(--reka-collapsible-content-height, var(--kb-collapsible-content-height, auto)) ) ); } to { height: 0; } } --animate-caret-blink: caret-blink 1.25s ease-out infinite; @keyframes caret-blink { 0%, 70%, 100% { opacity: 1; } 20%, 50% { opacity: 0; } } } /* Utility classes */ @utility animation-duration-* { --tw-animation-duration: calc(--value(number) * 1ms); --tw-animation-duration: --value(--animation-duration-*, [duration], "initial", [*]); animation-duration: calc(--value(number) * 1ms); animation-duration: --value(--animation-duration-*, [duration], "initial", [*]); } @utility delay-* { animation-delay: calc(--value(number) * 1ms); animation-delay: --value(--animation-delay-*, [duration], "initial", [*]); --tw-animation-delay: calc(--value(number) * 1ms); --tw-animation-delay: --value(--animation-delay-*, [duration], "initial", [*]); } @utility repeat-* { animation-iteration-count: --value(--animation-repeat-*, number, "initial", [*]); --tw-animation-iteration-count: --value(--animation-repeat-*, number, "initial", [*]); } @utility direction-* { animation-direction: --value(--animation-direction-*, "initial", [*]); --tw-animation-direction: --value(--animation-direction-*, "initial", [*]); } @utility fill-mode-* { animation-fill-mode: --value(--animation-fill-mode-*, "initial", [*]); --tw-animation-fill-mode: --value(--animation-fill-mode-*, "initial", [*]); } @utility running { animation-play-state: running; } @utility paused { animation-play-state: paused; } @utility play-state-* { animation-play-state: --value("initial", [*]); } @utility blur-in { --tw-enter-blur: 20px; } @utility blur-in-* { --tw-enter-blur: calc(--value(number) * 1px); --tw-enter-blur: --value(--blur-*, [*]); } @utility blur-out { --tw-exit-blur: 20px; } @utility blur-out-* { --tw-exit-blur: calc(--value(number) * 1px); --tw-exit-blur: --value(--blur-*, [*]); } @utility fade-in { --tw-enter-opacity: 0; } @utility fade-in-* { --tw-enter-opacity: calc(--value(number) / 100); --tw-enter-opacity: --value(--percentage-*, [*]); } @utility fade-out { --tw-exit-opacity: 0; } @utility fade-out-* { --tw-exit-opacity: calc(--value(number) / 100); --tw-exit-opacity: --value(--percentage-*, [*]); } @utility zoom-in { --tw-enter-scale: 0; } @utility zoom-in-* { --tw-enter-scale: calc(--value(number) * 1%); --tw-enter-scale: calc(--value(ratio)); --tw-enter-scale: --value(--percentage-*, [*]); } @utility -zoom-in-* { --tw-enter-scale: calc(--value(number) * -1%); --tw-enter-scale: calc(--value(ratio) * -1); --tw-enter-scale: --value(--percentage-*, [*]); } @utility zoom-out { --tw-exit-scale: 0; } @utility zoom-out-* { --tw-exit-scale: calc(--value(number) * 1%); --tw-exit-scale: calc(--value(ratio)); --tw-exit-scale: --value(--percentage-*, [*]); } @utility -zoom-out-* { --tw-exit-scale: calc(--value(number) * -1%); --tw-exit-scale: calc(--value(ratio) * -1); --tw-exit-scale: --value(--percentage-*, [*]); } @utility spin-in { --tw-enter-rotate: 30deg; } @utility spin-in-* { --tw-enter-rotate: calc(--value(number) * 1deg); --tw-enter-rotate: calc(--value(ratio) * 360deg); --tw-enter-rotate: --value(--rotate-*, [*]); } @utility -spin-in { --tw-enter-rotate: -30deg; } @utility -spin-in-* { --tw-enter-rotate: calc(--value(number) * -1deg); --tw-enter-rotate: calc(--value(ratio) * -360deg); --tw-enter-rotate: --value(--rotate-*, [*]); } @utility spin-out { --tw-exit-rotate: 30deg; } @utility spin-out-* { --tw-exit-rotate: calc(--value(number) * 1deg); --tw-exit-rotate: calc(--value(ratio) * 360deg); --tw-exit-rotate: --value(--rotate-*, [*]); } @utility -spin-out { --tw-exit-rotate: -30deg; } @utility -spin-out-* { --tw-exit-rotate: calc(--value(number) * -1deg); --tw-exit-rotate: calc(--value(ratio) * -360deg); --tw-exit-rotate: --value(--rotate-*, [*]); } @utility slide-in-from-top { --tw-enter-translate-y: -100%; } @utility slide-in-from-top-* { --tw-enter-translate-y: calc(--value(integer) * var(--spacing) * -1); --tw-enter-translate-y: calc(--value(--percentage-*, --percentage-translate-*) * -100%); --tw-enter-translate-y: calc(--value(ratio) * -100%); --tw-enter-translate-y: calc(--value(--translate-*, [percentage], [length]) * -1); } @utility slide-in-from-bottom { --tw-enter-translate-y: 100%; } @utility slide-in-from-bottom-* { --tw-enter-translate-y: calc(--value(integer) * var(--spacing)); --tw-enter-translate-y: calc(--value(--percentage-*, --percentage-translate-*) * 100%); --tw-enter-translate-y: calc(--value(ratio) * 100%); --tw-enter-translate-y: --value(--translate-*, [percentage], [length]); } @utility slide-in-from-left { --tw-enter-translate-x: -100%; } @utility slide-in-from-left-* { --tw-enter-translate-x: calc(--value(integer) * var(--spacing) * -1); --tw-enter-translate-x: calc(--value(--percentage-*, --percentage-translate-*) * -100%); --tw-enter-translate-x: calc(--value(ratio) * -100%); --tw-enter-translate-x: calc(--value(--translate-*, [percentage], [length]) * -1); } @utility slide-in-from-right { --tw-enter-translate-x: 100%; } @utility slide-in-from-right-* { --tw-enter-translate-x: calc(--value(integer) * var(--spacing)); --tw-enter-translate-x: calc(--value(--percentage-*, --percentage-translate-*) * 100%); --tw-enter-translate-x: calc(--value(ratio) * 100%); --tw-enter-translate-x: --value(--translate-*, [percentage], [length]); } @utility slide-in-from-start { &:dir(ltr) { --tw-enter-translate-x: -100%; } &:dir(rtl) { --tw-enter-translate-x: 100%; } } @utility slide-in-from-start-* { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { --tw-enter-translate-x: calc(--value(integer) * var(--spacing) * -1); --tw-enter-translate-x: calc(--value(--percentage-*, --percentage-translate-*) * -100%); --tw-enter-translate-x: calc(--value(ratio) * -100%); --tw-enter-translate-x: calc(--value(--translate-*, [percentage], [length]) * -1); } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { --tw-enter-translate-x: calc(--value(integer) * var(--spacing)); --tw-enter-translate-x: calc(--value(--percentage-*, --percentage-translate-*) * 100%); --tw-enter-translate-x: calc(--value(ratio) * 100%); --tw-enter-translate-x: --value(--translate-*, [percentage], [length]); } } @utility slide-in-from-end { &:dir(ltr) { --tw-enter-translate-x: 100%; } &:dir(rtl) { --tw-enter-translate-x: -100%; } } @utility slide-in-from-end-* { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { --tw-enter-translate-x: calc(--value(integer) * var(--spacing)); --tw-enter-translate-x: calc(--value(--percentage-*, --percentage-translate-*) * 100%); --tw-enter-translate-x: calc(--value(ratio) * 100%); --tw-enter-translate-x: --value(--translate-*, [percentage], [length]); } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { --tw-enter-translate-x: calc(--value(integer) * var(--spacing) * -1); --tw-enter-translate-x: calc(--value(--percentage-*, --percentage-translate-*) * -100%); --tw-enter-translate-x: calc(--value(ratio) * -100%); --tw-enter-translate-x: calc(--value(--translate-*, [percentage], [length]) * -1); } } @utility slide-out-to-top { --tw-exit-translate-y: -100%; } @utility slide-out-to-top-* { --tw-exit-translate-y: calc(--value(integer) * var(--spacing) * -1); --tw-exit-translate-y: calc(--value(--percentage-*, --percentage-translate-*) * -100%); --tw-exit-translate-y: calc(--value(ratio) * -100%); --tw-exit-translate-y: calc(--value(--translate-*, [percentage], [length]) * -1); } @utility slide-out-to-bottom { --tw-exit-translate-y: 100%; } @utility slide-out-to-bottom-* { --tw-exit-translate-y: calc(--value(integer) * var(--spacing)); --tw-exit-translate-y: calc(--value(--percentage-*, --percentage-translate-*) * 100%); --tw-exit-translate-y: calc(--value(ratio) * 100%); --tw-exit-translate-y: --value(--translate-*, [percentage], [length]); } @utility slide-out-to-left { --tw-exit-translate-x: -100%; } @utility slide-out-to-left-* { --tw-exit-translate-x: calc(--value(integer) * var(--spacing) * -1); --tw-exit-translate-x: calc(--value(--percentage-*, --percentage-translate-*) * -100%); --tw-exit-translate-x: calc(--value(ratio) * -100%); --tw-exit-translate-x: calc(--value(--translate-*, [percentage], [length]) * -1); } @utility slide-out-to-right { --tw-exit-translate-x: 100%; } @utility slide-out-to-right-* { --tw-exit-translate-x: calc(--value(integer) * var(--spacing)); --tw-exit-translate-x: calc(--value(--percentage-*, --percentage-translate-*) * 100%); --tw-exit-translate-x: calc(--value(ratio) * 100%); --tw-exit-translate-x: --value(--translate-*, [percentage], [length]); } @utility slide-out-to-start { &:dir(ltr) { --tw-exit-translate-x: -100%; } &:dir(rtl) { --tw-exit-translate-x: 100%; } } @utility slide-out-to-start-* { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { --tw-exit-translate-x: calc(--value(integer) * var(--spacing) * -1); --tw-exit-translate-x: calc(--value(--percentage-*, --percentage-translate-*) * -100%); --tw-exit-translate-x: calc(--value(ratio) * -100%); --tw-exit-translate-x: calc(--value(--translate-*, [percentage], [length]) * -1); } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { --tw-exit-translate-x: calc(--value(integer) * var(--spacing)); --tw-exit-translate-x: calc(--value(--percentage-*, --percentage-translate-*) * 100%); --tw-exit-translate-x: calc(--value(ratio) * 100%); --tw-exit-translate-x: --value(--translate-*, [percentage], [length]); } } @utility slide-out-to-end { &:dir(ltr) { --tw-exit-translate-x: 100%; } &:dir(rtl) { --tw-exit-translate-x: -100%; } } @utility slide-out-to-end-* { &:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) { --tw-exit-translate-x: calc(--value(integer) * var(--spacing)); --tw-exit-translate-x: calc(--value(--percentage-*, --percentage-translate-*) * 100%); --tw-exit-translate-x: calc(--value(ratio) * 100%); --tw-exit-translate-x: --value(--translate-*, [percentage], [length]); } &:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) { --tw-exit-translate-x: calc(--value(integer) * var(--spacing) * -1); --tw-exit-translate-x: calc(--value(--percentage-*, --percentage-translate-*) * -100%); --tw-exit-translate-x: calc(--value(ratio) * -100%); --tw-exit-translate-x: calc(--value(--translate-*, [percentage], [length]) * -1); } }