diff --git a/tailwindcss-animate.css b/tailwindcss-animate.css index 8dbbe10..46ed8ed 100644 --- a/tailwindcss-animate.css +++ b/tailwindcss-animate.css @@ -167,62 +167,108 @@ animation-play-state: paused; } +@utility fade-in { + --tw-enter-opacity: 0; +} @utility fade-in-* { --tw-enter-opacity: --value(--percentage-*, [*]); } + +@utility fade-out { + --tw-exit-opacity: 0; +} @utility fade-out-* { --tw-exit-opacity: --value(--percentage-*, [*]); } +@utility zoom-in { + --tw-enter-scale: 0; +} @utility zoom-in-* { --tw-enter-scale: calc(--value([percentage]) / 100%); --tw-enter-scale: calc(--value([ratio], [number])); --tw-enter-scale: --value(--percentage-*); } + +@utility zoom-out { + --tw-exit-scale: 0; +} @utility zoom-out-* { --tw-exit-scale: calc(--value([percentage]) / 100%); --tw-exit-scale: calc(--value([ratio], [number])); --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: --value(--rotate-*, [angle]); } + +@utility spin-out { + --tw-exit-rotate: 30deg; +} @utility spin-out-* { --tw-exit-rotate: calc(--value(number) * 1deg); --tw-exit-rotate: --value(--rotate-*, [angle]); } +@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(--translate-*, [percentage], ratio, [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: --value(--translate-*, [percentage], ratio, [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(--translate-*, [percentage], ratio, [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: --value(--translate-*, [percentage], ratio, [length]); } +@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(--translate-*, [percentage], ratio, [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: --value(--translate-*, [percentage], ratio, [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(--translate-*, [percentage], ratio, [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: --value(--translate-*, [percentage], ratio, [length]);