// 块切入动画

// 由上到下、逐渐变大动画
.slideInTopFwd {
    animation: slide-in-top-fwd 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes slide-in-top-fwd {
    0% {
        transform: translateY(-600px) rotateX(-30deg) scale(0);
        transform-origin: 50% 100%;
        opacity: 0;
    }
    100% {
        transform: translateY(0) rotateX(0) scale(1);
        transform-origin: 50% 1400px;
        opacity: 1;
    }
}

// 由小慢慢变大，位置不发生改变
.scaleUpCenter {
    animation: scale-up-center 1s linear normal none;
}
@keyframes scale-up-center {
    0% {
        transform: scale(.2);
    }

    100% {
        transform: scale(1);
    }
}

// 从上到下慢慢出现内容，位置不发生改变
.shutterInTop {
    animation: shutter-in-top 1s linear normal none;
}
@keyframes shutter-in-top {
    0% {
        transform: rotateX(-100deg);
        transform-origin: top;
        opacity: 0;
    }
    100% {
        transform: rotateX(0deg);
        transform-origin: top;
        opacity: 1;
    }
}

// 从右上角进入
.tiltInFwdTr {
    animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes tilt-in-fwd-tr {
    0% {
        transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
        opacity: 0;
    }
    100% {
        transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
        opacity: 1;
    }
}

// 左 ===》 右
.slideInLeft {
    animation-name: slide-in-left;
    animation-duration: 0.5s;
    animation-timing-function: ease-in;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: none;
}
@keyframes slide-in-left {
    0% {
        transform: translateX(-1000px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}