Desktop/stylesheets/tailwind-plugins/animate-enter-exit.css

/**
 * Copyright 2025 Signal Messenger, LLC
 * SPDX-License-Identifier: AGPL-3.0-only
 */

/**
 * Properties
 */

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

/**
 * Utilities
 */

@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)
  );
}

/**
 * animate-opacity
 */

@utility animate-opacity-* {
  --tw-animate-opacity: calc(--value(integer) * 1%);
}

/**
 * animate-rotate
 */

@utility animate-rotate-* {
  --tw-animate-rotate: rotate(calc(--value(integer) * 1deg));
}
@utility -animate-rotate-* {
  --tw-animate-rotate: rotate(calc(--value(integer) * -1deg));
}

/**
 * animate-scale
 */

@utility animate-scale-* {
  --tw-animate-scale: scale(calc(--value(number) * 1%));
}
@utility -animate-scale-* {
  --tw-animate-scale: scale(calc(--value(number) * -1%));
}

/**
 * animate-translate
 */

@utility animate-translate-x-* {
  --tw-animate-translate-x: translateX(--spacing(--value(integer)));
  --tw-animate-translate-x: translateX(--value([percentage], [length]));
}
@utility -animate-translate-x-* {
  --tw-animate-translate-x: translateX(--spacing(--value(integer) * -1));
  --tw-animate-translate-x: translateX(
    calc(--value([percentage], [length]) * -1)
  );
}
@utility animate-translate-y-* {
  --tw-animate-translate-y: translateY(--spacing(--value(integer)));
  --tw-animate-translate-y: translateY(--value([percentage], [length]));
}
@utility -animate-translate-y-* {
  --tw-animate-translate-y: translateY(--spacing(--value(integer) * -1));
  --tw-animate-translate-y: translateY(
    calc(--value([percentage], [length]) * -1)
  );
}

/**
 * Keyframes
 */

@layer utilities {
  @keyframes tw-animate-enter {
    from {
      opacity: var(--tw-animate-opacity);
      /* prettier-ignore */
      transform:
        var(--tw-animate-rotate,)
        var(--tw-animate-scale,)
        var(--tw-animate-translate-x,)
        var(--tw-animate-translate-y,);
    }
  }

  @keyframes tw-animate-exit {
    to {
      opacity: var(--tw-animate-opacity);
      /* prettier-ignore */
      transform:
        var(--tw-animate-rotate,)
        var(--tw-animate-scale,)
        var(--tw-animate-translate-x,)
        var(--tw-animate-translate-y,);
    }
  }
}