@keyframes fly {
  from {
    opacity: var(--from-opacity, 0);
    transform: translate(var(--from-x, 0), var(--from-y, 0));
  }

  to {
    opacity: var(--to-opacity, 1);
    transform: translate(var(--to-x, 0), var(--to-y, 0));
  }
}

@utility animation-fly {
  & {
    @apply animation;
    --animation-name: fly;
  }
}

@utility animation-fly-in-left {
  @apply animation-fly;
  --from-x: -100%;
  --to-x: 0;
}

@utility animation-fly-in-right {
  @apply animation-fly;
  --from-x: 100%;
  --to-x: 0;
}

@utility animation-fly-in-top {
  @apply animation-fly;
  --from-y: -100%;
  --to-y: 0;
}

@utility animation-fly-in-bottom {
  @apply animation-fly;
  --from-y: 100%;
  --to-y: 0;
}

@utility animation-fly-out-left {
  @apply animation-fly;
  --from-x: 0;
  --to-x: -100%;
  --from-opacity: 1;
  --to-opacity: 0;
}

@utility animation-fly-out-right {
  @apply animation-fly;
  --from-x: 0;
  --to-x: 100%;
  --from-opacity: 1;
  --to-opacity: 0;
}

@utility animation-fly-out-top {
  @apply animation-fly;
  --from-y: 0;
  --to-y: -100%;
  --from-opacity: 1;
  --to-opacity: 0;
}

@utility animation-fly-out-bottom {
  @apply animation-fly;
  --from-y: 0;
  --to-y: 100%;
  --from-opacity: 1;
  --to-opacity: 0;
}