// zoom-in
.f-zoom-in-enter-active,
.f-zoom-in-leave-active {
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 1;
  transform: scaleY(1);
  transform-origin: center top;
}
.f-zoom-in-enter,
.f-zoom-in-leave-active {
  opacity: 0;
  transform: scaleY(0);
}
.f-zoom-in-enter-active[data-popper-placement^='top'],
.f-zoom-in-leave-active[data-popper-placement^='top'] {
  transform: scaleY(1);
  transform-origin: center bottom;
}
.f-zoom-in-enter[data-popper-placement^='top'],
.f-zoom-in-leave-active[data-popper-placement^='top'] {
  transform: scaleY(0);
}
.f-zoom-in-enter-active[data-popper-placement^='bottom'],
.f-zoom-in-leave-active[data-popper-placement^='bottom'] {
  transform: scaleY(1);
  transform-origin: center top;
}
.f-zoom-in-enter[data-popper-placement^='bottom'],
.f-zoom-in-leave-active[data-popper-placement^='bottom'] {
  transform: scaleY(0);
}
.f-zoom-in-enter-active[data-popper-placement^='right'],
.f-zoom-in-leave-active[data-popper-placement^='right'] {
  transform: scaleX(1);
  transform-origin: center left;
}
.f-zoom-in-enter[data-popper-placement^='right'],
.f-zoom-in-leave-active[data-popper-placement^='right'] {
  transform: scaleX(0);
}
.f-zoom-in-enter-active[data-popper-placement^='left'],
.f-zoom-in-leave-active[data-popper-placement^='left'] {
  transform: scaleX(1);
  transform-origin: center right;
}
.f-zoom-in-enter[data-popper-placement^='left'],
.f-zoom-in-leave-active[data-popper-placement^='left'] {
  transform: scaleX(0);
}

// fade-in-linear
.f-fade-in-linear-enter-active,
.f-fade-in-linear-leave-active {
  transition: opacity 150ms linear;
}
.f-fade-in-linear-enter-from,
.f-fade-in-linear-leave-to {
  opacity: 0;
}

// fade-out-linear
.f-fade-out-linear-enter-active,
.f-fade-out-linear-leave-active {
  transition: opacity 150ms linear;
}
.f-fade-out-linear-enter-from,
.f-fade-out-linear-leave-to {
  opacity: 0;
}

// message-fade
.f-message-fade-enter-active {
  animation: f-message-fade-in 0.3s;
}
.f-message-fade-leave-active {
  animation: f-message-fade-out 0.3s;
}
@keyframes f-message-fade-in {
  0% {
    transform: translate(-50%, -20px);
    opacity: 0;
  }

  100% {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}
@keyframes f-message-fade-out {
  0% {
    transform: translate(-50%, 0);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -20px);
    opacity: 0;
  }
}

// modal-fade
@modal-fade-duration: 250ms;
.f-modal-fade-enter-active,
.f-modal-fade-leave-active {
  transition: transform @modal-fade-duration, opacity @modal-fade-duration;
}
.f-modal-fade-enter-from {
  opacity: 0;
  transform: translate3d(0, -20px, 0);
}
.f-modal-fade-leave-to {
  opacity: 0;
  transform: translate3d(0, -20px, 0);
}

// zoom-fade
.f-zoom-fade-enter-active,
.f-zoom-fade-leave-active {
  transition: transform 0.2s, opacity 0.3s ease-out;
}
.f-zoom-fade-enter-from {
  opacity: 0;
  transform: scale(0.92);
}
.f-zoom-fade-leave-to {
  opacity: 0;
  transform: scale(1.06);
}

// zoom-fade 在vue3版本的fabrie-design中可用
.f-zoom-fade-enter-active,
.f-zoom-fade-leave-active {
  transition: transform 0.2s, opacity 0.3s ease-out;
}
.f-zoom-fade-enter-from {
  opacity: 0;
  transform: scale(0.92);
}
.f-zoom-fade-leave-to {
  opacity: 0;
  transform: scale(1.06);
}

// fade-out-linear 在vue3版本的fabrie-design中可用
.f-fade-out-linear-enter-active,
.f-fade-out-linear-leave-active {
  transition: opacity 150ms linear;
}
.f-fade-out-linear-enter-from,
.f-fade-out-linear-leave-to {
  opacity: 0;
}