/*文字- 从上渐变到下动画 */

.animation-slide-top {
    -webkit-animation-name: slide-top;
    -o-animation-name: slide-top;
    animation-name: slide-top;
}


/*盒子- 从下渐变到上动画 */

.animation-slide-bottom50 {
    -webkit-animation-name: slide-bottom50;
    animation-name: slide-bottom50;
}


/*盒子- 从左渐变到右动画 */

.animation-slide-left {
    -webkit-animation-name: slide-left;
    -o-animation-name: slide-left;
    animation-name: slide-left;
}


/*盒子- 从右渐变到左动画 */

.animation-slide-right {
    -webkit-animation-name: slide-right;
    -o-animation-name: slide-right;
    animation-name: slide-right;
}


/* 盒子- 从左边底部弹上来 */

.animation-poput-left {
    -webkit-animation-name: poput-left;
    -o-animation-name: poput-left;
    animation-name: poput-left;
}


/* 盒子- 从右边底部弹上来 */

.animation-poput-right {
    -webkit-animation-name: poput-right;
    -o-animation-name: poput-right;
    animation-name: poput-right;
}


/* 盒子- 从果冻般放大放小 */

.animation-bounceln {
    -webkit-animation-name: bounceln;
    -o-animation-name: bounceln;
    animation-name: bounceln;
}

.p-animation-backgroudcolor {
    -webkit-animation-name: backgroudcolor;
    -o-animation-name: backgroudcolor;
    animation-name: backgroudcolor;
}


/* 全局-动画渐变速度 */

[class*=animation-] {
    -webkit-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
}

[class*="animation-"] {
    animation-fill-mode: none;
}


/* 文字-从上渐变到下动画 */

@keyframes slide-top {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}


/*盒子- 从下渐变到上动画 */

@keyframes slide-bottom50 {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}


/*盒子- 从左渐变到右动画 */

@keyframes slide-left {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}


/*盒子- 从右渐变到左动画 */

@keyframes slide-right {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}


/* 盒子- 从左边底部弹上来 */

@keyframes poput-left {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        -ms-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        -ms-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
    }
}


/* 盒子- 从右边底部弹上来 */

@keyframes poput-right {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        -ms-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(0.55, .055, .675, .19);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        -ms-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(0.175, .885, .32, 1);
    }
}


/* 盒子- 从果冻般放大放小 */

@keyframes bounceln {
    0%,
    100%,
    20%,
    40%,
    60%,
    80% {
        -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
        transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        -ms-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        -ms-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        -ms-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        -ms-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        -ms-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}


/* 盒子- 背景颜色移动 */

@keyframes backgroudcolor {
    0% {
        opacity: 1;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
    50% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
}