@charset "UTF-8";
/* 动画曲线 */
[effect-easing=linear][effect],
[effect-easing=linear] [effect] {
  transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
}

[effect-easing=ease][effect],
[effect-easing=ease] [effect] {
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

[effect-easing=ease-in][effect],
[effect-easing=ease-in] [effect] {
  transition-timing-function: cubic-bezier(0.42, 0, 1, 1);
}

[effect-easing=ease-out][effect],
[effect-easing=ease-out] [effect] {
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
}

[effect-easing=ease-in-out][effect],
[effect-easing=ease-in-out] [effect] {
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

[effect-easing=ease-in-back][effect],
[effect-easing=ease-in-back] [effect] {
  transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.45);
}

[effect-easing=ease-out-back][effect],
[effect-easing=ease-out-back] [effect] {
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[effect-easing=ease-in-out-back][effect],
[effect-easing=ease-in-out-back] [effect] {
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* 动画持续时间 */
[effect] {
  transition-duration: 800ms;
}

/* 渐入动画 */
[effect^=fade][effect^=fade] {
  opacity: 0;
  transition-property: opacity, transform;
}
[effect^=fade][effect^=fade].is-animate {
  opacity: 1;
}

[effect=fade-up] {
  transform: translate(0, 50%);
}
[effect=fade-up].is-animate {
  transform: translate(0, 0);
}

[effect=fade-down] {
  transform: translate(0, -50%);
}
[effect=fade-down].is-animate {
  transform: translate(0, 0);
}

[effect=fade-right] {
  transform: translate(-50%, 0);
}
[effect=fade-right].is-animate {
  transform: translate(0, 0);
}

[effect=fade-left] {
  transform: translate(50%, 0);
}
[effect=fade-left].is-animate {
  transform: translate(0, 0);
}

[effect=fade-up-right] {
  transform: translate(-50%, 50%);
}
[effect=fade-up-right].is-animate {
  transform: translate(0, 0);
}

[effect=fade-up-left] {
  transform: translate(50%, 50%);
}
[effect=fade-up-left].is-animate {
  transform: translate(0, 0);
}

[effect=fade-down-right] {
  transform: translate(-50%, -50%);
}
[effect=fade-down-right].is-animate {
  transform: translate(0, 0);
}

[effect=fade-down-left] {
  transform: translate(50%, -50%);
}
[effect=fade-down-left].is-animate {
  transform: translate(0, 0);
}

/* 缩放动画 */
[effect^=zoom][effect^=zoom] {
  opacity: 0;
  transition-property: opacity, transform;
}
[effect^=zoom][effect^=zoom].is-animate {
  opacity: 1;
}

[effect=zoom-in] {
  transform: scale(0.6);
}
[effect=zoom-in].is-animate {
  transform: scale(1);
}

[effect=zoom-in-up] {
  transform: translate(0, 50%) scale(0.6);
}
[effect=zoom-in-up].is-animate {
  transform: translate(0, 0) scale(1);
}

[effect=zoom-in-down] {
  transform: translate(0, -50%) scale(0.6);
}
[effect=zoom-in-down].is-animate {
  transform: translate(0, 0) scale(1);
}

[effect=zoom-in-right] {
  transform: translate(-50%, 0) scale(0.6);
}
[effect=zoom-in-right].is-animate {
  transform: translate(0, 0) scale(1);
}

[effect=zoom-in-left] {
  transform: translate(50%, 0) scale(0.6);
}
[effect=zoom-in-left].is-animate {
  transform: translate(0, 0) scale(1);
}

[effect=zoom-out] {
  transform: scale(1.2);
}
[effect=zoom-out].is-animate {
  transform: scale(1);
}

[effect=zoom-out-up] {
  transform: translate(0, 50%) scale(1.2);
}
[effect=zoom-out-up].is-animate {
  transform: translate(0, 0) scale(1);
}

[effect=zoom-out-down] {
  transform: translate(0, -50%) scale(1.2);
}
[effect=zoom-out-down].is-animate {
  transform: translate(0, 0) scale(1);
}

[effect=zoom-out-right] {
  transform: translate(-50%, 0) scale(1.2);
}
[effect=zoom-out-right].is-animate {
  transform: translate(0, 0) scale(1);
}

[effect=zoom-out-left] {
  transform: translate(50%, 0) scale(1.2);
}
[effect=zoom-out-left].is-animate {
  transform: translate(0, 0) scale(1);
}

/* 进入 */
[effect^=slide][effect^=slide] {
  transition-property: transform;
}

[effect=slide-up] {
  transform: translate(0, 100%);
}
[effect=slide-up].is-animate {
  transform: translate(0, 0);
}

[effect=slide-down] {
  transform: translate(0, -100%);
}
[effect=slide-down].is-animate {
  transform: translate(0, 0);
}

[effect=slide-right] {
  transform: translate(-100%, 0);
}
[effect=slide-right].is-animate {
  transform: translate(0, 0);
}

[effect=slide-left] {
  transform: translate(100%, 0);
}
[effect=slide-left].is-animate {
  transform: translate(0, 0);
}

/* 翻转 */
[effect^=flip][effect^=flip] {
  backface-visibility: hidden;
  transition-property: transform;
}

[effect=flip-left] {
  transform: perspective(2500px) rotateY(-100deg);
}
[effect=flip-left].is-animate {
  transform: perspective(2500px) rotateY(0);
}

[effect=flip-right] {
  transform: perspective(2500px) rotateY(100deg);
}
[effect=flip-right].is-animate {
  transform: perspective(2500px) rotateY(0);
}

[effect=flip-up] {
  transform: perspective(2500px) rotateX(-100deg);
}
[effect=flip-up].is-animate {
  transform: perspective(2500px) rotateX(0);
}

[effect=flip-down] {
  transform: perspective(2500px) rotateX(100deg);
}
[effect=flip-down].is-animate {
  transform: perspective(2500px) rotateX(0);
}