.ty-zoom-center-top-enter {
  opacity: 0;
  transform: scaleY(0);
}
.ty-zoom-center-top-enter-active {
  opacity: 1;
  transform: scaleY(1);
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
  transform-origin: center bottom;
}
.ty-zoom-center-top-exit {
  opacity: 1;
}
.ty-zoom-center-top-exit-active {
  opacity: 0;
  transform: scaleY(0);
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
  transform-origin: center bottom;
}

.ty-zoom-center-left-enter {
  opacity: 0;
  transform: scaleX(0);
}
.ty-zoom-center-left-enter-active {
  opacity: 1;
  transform: scaleX(1);
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
  transform-origin: right center;
}
.ty-zoom-center-left-exit {
  opacity: 1;
}
.ty-zoom-center-left-exit-active {
  opacity: 0;
  transform: scaleX(0);
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
  transform-origin: right center;
}

.ty-zoom-center-right-enter {
  opacity: 0;
  transform: scaleX(0);
}
.ty-zoom-center-right-enter-active {
  opacity: 1;
  transform: scaleX(1);
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
  transform-origin: left center;
}
.ty-zoom-center-right-exit {
  opacity: 1;
}
.ty-zoom-center-right-exit-active {
  opacity: 0;
  transform: scaleX(0);
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
  transform-origin: left center;
}

.ty-zoom-center-bottom-enter {
  opacity: 0;
  transform: scaleY(0);
}
.ty-zoom-center-bottom-enter-active {
  opacity: 1;
  transform: scaleY(1);
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
  transform-origin: center top;
}
.ty-zoom-center-bottom-exit {
  opacity: 1;
}
.ty-zoom-center-bottom-exit-active {
  opacity: 0;
  transform: scaleY(0);
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
  transform-origin: center top;
}

.ty-zoom-top-start-enter {
  opacity: 0;
  transform: scale(0, 0);
}
.ty-zoom-top-start-enter-active {
  opacity: 1;
  transform: scale(1, 1);
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
  transform-origin: left bottom;
}
.ty-zoom-top-start-exit {
  opacity: 1;
}
.ty-zoom-top-start-exit-active {
  opacity: 0;
  transform: scale(0, 0);
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
  transform-origin: left bottom;
}

.ty-zoom-top-enter {
  opacity: 0;
  transform: scale(0, 0);
}
.ty-zoom-top-enter-active {
  opacity: 1;
  transform: scale(1, 1);
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
  transform-origin: center bottom;
}
.ty-zoom-top-exit {
  opacity: 1;
}
.ty-zoom-top-exit-active {
  opacity: 0;
  transform: scale(0, 0);
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
  transform-origin: center bottom;
}

.ty-zoom-top-end-enter {
  opacity: 0;
  transform: scale(0, 0);
}
.ty-zoom-top-end-enter-active {
  opacity: 1;
  transform: scale(1, 1);
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
  transform-origin: right bottom;
}
.ty-zoom-top-end-exit {
  opacity: 1;
}
.ty-zoom-top-end-exit-active {
  opacity: 0;
  transform: scale(0, 0);
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
  transform-origin: right bottom;
}

.ty-zoom-bottom-start-enter {
  opacity: 0;
  transform: scale(0, 0);
}
.ty-zoom-bottom-start-enter-active {
  opacity: 1;
  transform: scale(1, 1);
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
  transform-origin: left top;
}
.ty-zoom-bottom-start-exit {
  opacity: 1;
}
.ty-zoom-bottom-start-exit-active {
  opacity: 0;
  transform: scale(0, 0);
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
  transform-origin: left top;
}

.ty-zoom-bottom-enter {
  opacity: 0;
  transform: scale(0, 0);
}
.ty-zoom-bottom-enter-active {
  opacity: 1;
  transform: scale(1, 1);
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
  transform-origin: center top;
}
.ty-zoom-bottom-exit {
  opacity: 1;
}
.ty-zoom-bottom-exit-active {
  opacity: 0;
  transform: scale(0, 0);
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
  transform-origin: center top;
}

.ty-zoom-bottom-end-enter {
  opacity: 0;
  transform: scale(0, 0);
}
.ty-zoom-bottom-end-enter-active {
  opacity: 1;
  transform: scale(1, 1);
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
  transform-origin: right top;
}
.ty-zoom-bottom-end-exit {
  opacity: 1;
}
.ty-zoom-bottom-end-exit-active {
  opacity: 0;
  transform: scale(0, 0);
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
  transform-origin: right top;
}

.ty-zoom-left-enter {
  opacity: 0;
  transform: scale(0, 0);
}
.ty-zoom-left-enter-active {
  opacity: 1;
  transform: scale(1, 1);
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
  transform-origin: right center;
}
.ty-zoom-left-exit {
  opacity: 1;
}
.ty-zoom-left-exit-active {
  opacity: 0;
  transform: scale(0, 0);
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
  transform-origin: right center;
}

.ty-zoom-right-enter {
  opacity: 0;
  transform: scale(0, 0);
}
.ty-zoom-right-enter-active {
  opacity: 1;
  transform: scale(1, 1);
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
  transform-origin: left center;
}
.ty-zoom-right-exit {
  opacity: 1;
}
.ty-zoom-right-exit-active {
  opacity: 0;
  transform: scale(0, 0);
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
  transform-origin: left center;
}

.ty-slide-down-enter {
  opacity: 0;
  transform: translateY(-10px);
}
.ty-slide-down-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: transform 300ms, opacity 300ms;
}
.ty-slide-down-exit {
  opacity: 1;
}
.ty-slide-down-exit-active {
  opacity: 0;
  transform: translateY(-10px);
  transition: transform 300ms, opacity 300ms;
}

.ty-slide-up-enter {
  opacity: 0;
  transform: translateY(10px);
}
.ty-slide-up-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: transform 300ms, opacity 300ms;
}
.ty-slide-up-exit {
  opacity: 1;
}
.ty-slide-up-exit-active {
  opacity: 0;
  transform: translateY(10px);
  transition: transform 300ms, opacity 300ms;
}