tailwind-animate.css

@import "tailwindcss";

@theme {
  --default-animation-duration: var(--default-transition-duration);
  --default-animation-timing-function: var(--default-animation-timing-function);
}

@property --tw-animate-duration {
  syntax: '*';
  inherits: false;
}
@property --tw-animate-ease {
  syntax: '*';
  inherits: false;
}
@property --tw-animate-opacity {
  syntax: '*';
  inherits: false;
}
@property --tw-animate-translate-y {
  syntax: '*';
  inherits: false;
}
@property --tw-animate-translate-x {
  syntax: '*';
  inherits: false;
}
@property --tw-animate-scale {
  syntax: '*';
  inherits: false;
}
@property --tw-animate-rotate {
  syntax: '*';
  inherits: false;
}

@utility animate-enter {
  animation-name: tw-animate-enter;
  animation-duration: var(--tw-animate-duration, var(--default-animation-duration));
  animation-timing-function: var(--tw-animate-ease, var(--default-animation-timing-function));
}
@utility animate-exit {
  animation-name: tw-animate-exit;
  animation-duration: var(--tw-animate-duration, var(--default-animation-duration));
  animation-timing-function: var(--tw-animate-ease, var(--default-animation-timing-function));
}
@utility animate-duration-* {
  --tw-animate-duration: calc(--value(integer) * 1ms);
  animation-duration: calc(--value(integer) * 1ms);
}
@utility animate-delay-* {
  animation-delay: calc(--value(integer) * 1ms);
}
@utility animate-ease-* {
  --tw-animate-ease: --value(--ease-*);
  animation-timing-function: --value(--ease-*);
}
@utility animate-fill-* {
  animation-fill-mode: --value('forwards', 'backwards', 'both', 'none');
}
@utility animate-state-* {
  animation-play-state: --value('paused', 'running');
}
@utility animate-direction-* {
  animation-direction: --value('normal', 'reverse', 'alternate', 'alternate-reverse');
}
@utility animate-opacity-* {
  --tw-animate-opacity: calc(--value(integer) * 1%);
}
@utility animate-translate-y-* {
  --tw-animate-translate-y: --spacing(--value(integer));
  --tw-animate-translate-y: --value([percentage], [length]);
}
@utility -animate-translate-y-* {
  --tw-animate-translate-y: --spacing(--value(integer) * -1);
  --tw-animate-translate-y: calc(--value([percentage], [length]) * -1);
}
@utility animate-translate-x-* {
  --tw-animate-translate-x: --spacing(--value(integer));
  --tw-animate-translate-x: --value([percentage], [length]);
}
@utility -animate-translate-x-* {
  --tw-animate-translate-x: --spacing(--value(integer) * -1);
  --tw-animate-translate-x: calc(--value([percentage], [length]) * -1);
}
@utility animate-rotate-* {
  --tw-animate-rotate: calc(--value(integer) * 1deg);
}
@utility -animate-rotate-* {
  --tw-animate-rotate: calc(--value(integer) * -1deg);
}
@utility animate-scale-* {
  --tw-animate-scale: calc(--value(number) * 1%);
}
@utility -animate-scale-* {
  --tw-animate-scale: calc(--value(number) * 1%);
}

@layer base {
  @keyframes tw-animate-enter {
    from {
      opacity: var(--tw-animate-opacity);
      translate: var(--tw-animate-translate-x) var(--tw-animate-translate-y);
      scale: var(--tw-animate-scale);
      rotate: var(--tw-animate-rotate);
    }
  }

  @keyframes tw-animate-exit {
    to {
      opacity: var(--tw-animate-opacity);
      translate: var(--tw-animate-translate-x) var(--tw-animate-translate-y);
      scale: var(--tw-animate-scale);
      rotate: var(--tw-animate-rotate);
    }
  }