/* 元素缩小.7倍，做渐显动画 */
.fade-in-el {
    -webkit-animation: fade-in 1.4s;
    animation: fade-in 1.4s
}

/* 上移5em */
.fade-in-up-el {
    -webkit-animation-name: fade-in-up;
    animation-name: fade-in-up;
    -webkit-animation-duration: 1.4s;
    animation-duration: 1.4s
}

.fade-in-down-el {
    -webkit-animation-name: fade-in-down;
    animation-name: fade-in-down;
    -webkit-animation-duration: 1.4s;
    animation-duration: 1.4s
}

.fade-in {
    animation: fade .8s ease-in 0s 1 normal forwards;
}

.fade-out {
    opacity: 1;
    animation: fade-reverse .8s ease-out 0s 1 normal forwards;
}

.enter-fade, .fade-in {
    opacity: 0;
}

/* 向上移动一段距离,渐现 */
.fade-up {
    opacity: 0;
    animation: fade 1s ease-in 0s 1 normal forwards, up-short-extra 1s ease 0s 1 normal forwards;
}

/* 向右下角移动缩小 */
.right-face {
    animation: right-turn .8s ease-out 0s 1 normal forwards;
}

/* 向左下角移动缩小 */
.left-face {
    animation: left-turn .8s ease-out 0s 1 normal forwards;
}

/* 上下回弹 */
.fade-bounce {
    animation: springback .6s ease-out 0s 1 normal forwards;
}

/* 从右往左移动 */
.fade-level {
    animation: fade-shift .2s ease-in 0s 1 normal forwards;
}

@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
        -webkit-transform: scale(.7);
        transform: scale(.7)
    }
    to {
        opacity: 1
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
        -webkit-transform: scale(.7);
        transform: scale(.7)
    }
    to {
        opacity: 1
    }
}

@-webkit-keyframes fade-in-up {
    0% {
        opacity: 0;
        -webkit-transform: translateY(5rem);
        transform: translateY(5rem)
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes fade-in-down {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    to {
        opacity: 0;
        -webkit-transform: translateY(5rem);
        transform: translateY(5rem)
    }
}

@keyframes fade-in-up {
    0% {
        opacity: 0;
        -webkit-transform: translateY(5rem);
        transform: translateY(5rem)
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes fade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-reverse {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes up-short-extra {
    0% {
		-ms-transform: translateY(100px);
		-webkit-transform: translateY(100px);
        transform: translateY(100px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes fade-shift {
    0% {
        transform: translateX(300px);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes springback {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-100px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes right-turn {
    0% {
        -ms-transform: translateX(0);
        /* IE 9 */
        -webkit-transform: translateX(0);
        /* Safari */
        transform: translateX(0);
    }

    100% {
        height: 50%;
        -ms-transform: translateX(67%);
        -webkit-transform: translateX(67%);
        transform: translateX(67%);
    }
}

@keyframes left-turn {
    0% {
        -ms-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        height: 50%;
        -ms-transform: translateX(-67%);
        -webkit-transform: translateX(-67%);
        transform: translateX(-67%);
    }
}

@keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fade-reverse {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}