移动端使用的框架是zepto，但是zepto的内置对象没有传统的animate这个方法，效果都是需要css3来实现的，zepto也不支持fadeIn和fadeOut等一些基本的动画，基于这一现状，我自己整理总结了css3的动画，方便以后工作和学习去使用。

　　基本的animate的知识我就不讲了，网上有好多介绍和讲解

　　animate属性详解：https://blog.csdn.net/aSuncat/article/details/52588078

　　参考文章：https://www.cnblogs.com/starof/p/4968769.html

　　在线看：http://123.206.56.83/animate/index.html

　　index.html
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<link rel="stylesheet" type="text/css" href="./baseAnimate.css">

<style type="text/css">

div{

    margin-left: 10px;

}

span{

    width: 100px;

    height: 100px;

    background: #000;

    display: inline-block;

}

</style>

<body>

    <!-- 4个方向的淡入 -->

    <div>

        <h2>4个方向的淡入</h2>

        <span class=" a-fadein"></span>

        <span class=" a-fadeinT"></span>

        <span class=" a-fadeinR"></span>

        <span class=" a-fadeinB"></span>

        <span class=" a-fadeinL"></span>

    </div>

    <!-- 4个方向的淡出 -->

    <div>

        <h2>4个方向的淡出</h2>

        <span class=" a-fadeout"></span>

        <span class=" a-fadeoutT"></span>

        <span class=" a-fadeoutR"></span>

        <span class=" a-fadeoutB"></span>

        <span class=" a-fadeoutL"></span>

    </div>

    <!-- 多个方向弹入 -->

    <div>

        <h2>多个方向弹入</h2>

        <span class=" a-bounce"></span>

        <span class=" a-bouncein"></span>

        <span class=" a-bounceinT"></span>

        <span class=" a-bounceinR"></span>

        <span class=" a-bounceinB"></span>

        <span class=" a-bounceinL"></span>

    </div>

    <!-- 多个方向弹出 -->

    <div>

        <h2>多个方向弹出</h2>

        <span class=" a-bounceout"></span>

        <span class=" a-bounceoutT"></span>

        <span class=" a-bounceoutR"></span>

        <span class=" a-bounceoutB"></span>

        <span class=" a-bounceoutL"></span>

    </div>

    <!-- 多个方向转入 -->

    <div>

        <h2>多个方向转入</h2>

        <span class=" a-rotatein"></span>

        <span class=" a-rotateinLT"></span>

        <span class=" a-rotateinLB"></span>

        <span class=" a-rotateinRT"></span>

        <span class=" a-rotateinRB"></span>

    </div>

    <!-- 多个方向转出 -->

    <div>

        <h2>多个方向转出</h2>

        <span class=" a-rotateout"></span>

        <span class=" a-rotateoutLT"></span>

        <span class=" a-rotateoutLB"></span>

        <span class=" a-rotateoutRT"></span>

        <span class=" a-rotateoutRB"></span>

    </div>

    <!-- 多个方向翻入 -->

    <div>

        <h2>多个方向翻入</h2>

        <span class=" a-flip"></span>

        <span class=" a-flipinX"></span>

        <span class=" a-flipinY"></span>

    </div>

    <!-- 多个方向翻出 -->

    <div>

        <h2>多个方向翻出</h2>

        <span class=" a-flipoutX"></span>

        <span class=" a-flipoutY"></span>

    </div>

    <!-- flash -->

    <div>

        <h2>flash</h2>

        <span class=" a-flash"></span>

        <span class=" a-shake"></span>

        <span class=" a-swing"></span>

        <span class=" a-wobble"></span>

        <span class=" a-ring"></span>

    </div>

</body>

</html>
　　baseAnimate.css
/* animation */

.a-bounce,.a-flip,.a-flash,.a-shake,.a-swing,.a-wobble,.a-ring{

    -webkit-animation:1s ease;

    -moz-animation:1s ease;

    -ms-animation:1s ease;

    animation:1s ease;

}

.a-fadein,.a-fadeinT,.a-fadeinR,.a-fadeinB,.a-fadeinL,.a-bouncein,.a-bounceinT,.a-bounceinR,.a-bounceinB,.a-bounceinL,.a-rotatein,.a-rotateinLT,.a-rotateinLB,.a-rotateinRT,.a-rotateinRB,.a-flipin,.a-flipinX,.a-flipinY{

    -webkit-animation:1s ease-out backwards;

    -moz-animation:1s ease-out backwards;

    -ms-animation:1s ease-out backwards;

    animation:1s ease-out backwards;

}

.a-fadeout,.a-fadeoutT,.a-fadeoutR,.a-fadeoutB,.a-fadeoutL,.a-bounceout,.a-bounceoutT,.a-bounceoutR,.a-bounceoutB,.a-bounceoutL,.a-rotateout,.a-rotateoutLT,.a-rotateoutLB,.a-rotateoutRT,.a-rotateoutRB,.a-flipout,.a-flipoutX,.a-flipoutY{

    -webkit-animation:1s ease-in forwards;

    -moz-animation:1s ease-in forwards;

    -ms-animation:1s ease-in forwards;

    animation:1s ease-in forwards;

}

/* 淡入 */

.a-fadein{-webkit-animation-name:fadein;-moz-animation-name:fadein;-ms-animation-name:fadein;animation-name:fadein;}

/* 淡入-从上 */

.a-fadeinT{-webkit-animation-name:fadeinT;-moz-animation-name:fadeinT;-ms-animation-name:fadeinT;animation-name:fadeinT;}

/* 淡入-从右 */

.a-fadeinR{-webkit-animation-name:fadeinR;-moz-animation-name:fadeinR;-ms-animation-name:fadeinR;animation-name:fadeinR;}

/* 淡入-从下 */

.a-fadeinB{-webkit-animation-name:fadeinB;-moz-animation-name:fadeinB;-ms-animation-name:fadeinB;animation-name:fadeinB;}

/* 淡入-从左 */

.a-fadeinL{-webkit-animation-name:fadeinL;-moz-animation-name:fadeinL;-ms-animation-name:fadeinL;animation-name:fadeinL;}

/* 淡出 */

.a-fadeout{-webkit-animation-name:fadeout;-moz-animation-name:fadeout;-ms-animation-name:fadeout;animation-name:fadeout;}

/* 淡出-向上 */

.a-fadeoutT{-webkit-animation-name:fadeoutT;-moz-animation-name:fadeoutT;-ms-animation-name:fadeoutT;animation-name:fadeoutT;}

/* 淡出-向右 */

.a-fadeoutR{-webkit-animation-name:fadeoutR;-moz-animation-name:fadeoutR;-ms-animation-name:fadeoutR;animation-name:fadeoutR;}

/* 淡出-向下 */

.a-fadeoutB{-webkit-animation-name:fadeoutB;-moz-animation-name:fadeoutB;-ms-animation-name:fadeoutB;animation-name:fadeoutB;}

/* 淡出-向左 */

.a-fadeoutL{-webkit-animation-name:fadeoutL;-moz-animation-name:fadeoutL;-ms-animation-name:fadeoutL;animation-name:fadeoutL;}

/* 弹跳 */

.a-bounce{-webkit-animation-name:bounce;-moz-animation-name:bounce;-ms-animation-name:bounce;animation-name:bounce;}

/* 弹入 */

.a-bouncein{-webkit-animation-name:bouncein;-moz-animation-name:bouncein;-ms-animation-name:bouncein;animation-name:bouncein;}

/* 弹入-从上 */

.a-bounceinT{-webkit-animation-name:bounceinT;-moz-animation-name:bounceinT;-ms-animation-name:bounceinT;animation-name:bounceinT;}

/* 弹入-从右 */

.a-bounceinR{-webkit-animation-name:bounceinR;-moz-animation-name:bounceinR;-ms-animation-name:bounceinR;animation-name:bounceinR;}

/* 弹入-从下 */

.a-bounceinB{-webkit-animation-name:bounceinB;-moz-animation-name:bounceinB;-ms-animation-name:bounceinB;animation-name:bounceinB;}

/* 弹入-从左 */

.a-bounceinL{-webkit-animation-name:bounceinL;-moz-animation-name:bounceinL;-ms-animation-name:bounceinL;animation-name:bounceinL;}

/* 弹出 */

.a-bounceout{-webkit-animation-name:bounceout;-moz-animation-name:bounceout;-ms-animation-name:bounceout;animation-name:bounceout;}

/* 弹出-向上 */

.a-bounceoutT{-webkit-animation-name:bounceoutT;-moz-animation-name:bounceoutT;-ms-animation-name:bounceoutT;animation-name:bounceoutT;}

/* 弹出-向右 */

.a-bounceoutR{-webkit-animation-name:bounceoutR;-moz-animation-name:bounceoutR;-ms-animation-name:bounceoutR;animation-name:bounceoutR;}

/* 弹出-向下 */

.a-bounceoutB{-webkit-animation-name:bounceoutB;-moz-animation-name:bounceoutB;-ms-animation-name:bounceoutB;animation-name:bounceoutB;}

/* 弹出-向左 */

.a-bounceoutL{-webkit-animation-name:bounceoutL;-moz-animation-name:bounceoutL;-ms-animation-name:bounceoutL;animation-name:bounceoutL;}

/* 转入 */

.a-rotatein{-webkit-animation-name:rotatein;-moz-animation-name:rotatein;-ms-animation-name:rotatein;animation-name:rotatein;}

/* 转入-从左上 */

.a-rotateinLT{-webkit-animation-name:rotateinLT;-moz-animation-name:rotateinLT;-ms-animation-name:rotateinLT;animation-name:rotateinLT;}

/* 转入-从左下 */

.a-rotateinLB{-webkit-animation-name:rotateinLB;-moz-animation-name:rotateinLB;-ms-animation-name:rotateinLB;animation-name:rotateinLB;}

/* 转入-从右上 */

.a-rotateinRT{-webkit-animation-name:rotateinRT;-moz-animation-name:rotateinRT;-ms-animation-name:rotateinRT;animation-name:rotateinRT;}

/* 转入-从右下*/

.a-rotateinRB{-webkit-animation-name:rotateinRB;-moz-animation-name:rotateinRB;-ms-animation-name:rotateinRB;animation-name:rotateinRB;}

/* 转出 */

.a-rotateout{-webkit-animation-name:rotateout;-moz-animation-name:rotateout;-ms-animation-name:rotateout;animation-name:rotateout;}

/* 转出-向左上 */

.a-rotateoutLT{-webkit-animation-name:rotateoutLT;-moz-animation-name:rotateoutLT;-ms-animation-name:rotateoutLT;animation-name:rotateoutLT;}

/* 转出-向左下 */

.a-rotateoutLB{-webkit-animation-name:rotateoutLB;-moz-animation-name:rotateoutLB;-ms-animation-name:rotateoutLB;animation-name:rotateoutLB;}

/* 转出-向右上 */

.a-rotateoutRT{-webkit-animation-name:rotateoutRT;-moz-animation-name:rotateoutRT;-ms-animation-name:rotateoutRT;animation-name:rotateoutRT;}

/* 转出-向右下 */

.a-rotateoutRB{-webkit-animation-name:rotateoutRB;-moz-animation-name:rotateoutRB;-ms-animation-name:rotateoutRB;animation-name:rotateoutRB;}

/* 翻转 */

.a-flip{-webkit-animation-name:flip;-moz-animation-name:flip;-ms-animation-name:flip;animation-name:flip;}

/* 翻入-X轴 */

.a-flipinX{-webkit-animation-name:flipinX;-moz-animation-name:flipinX;-ms-animation-name:flipinX;animation-name:flipinX;}

/* 翻入-Y轴 */

.a-flipin,.a-flipinY{-webkit-animation-name:flipinY;-moz-animation-name:flipinY;-ms-animation-name:flipinY;animation-name:flipinY;}

/* 翻出-X轴 */

.a-flipoutX{-webkit-animation-name:flipoutX;-moz-animation-name:flipoutX;-ms-animation-name:flipoutX;animation-name:flipoutX;}

/* 翻出-Y轴 */

.a-flipout,.a-flipoutY{-webkit-animation-name:flipoutY;-moz-animation-name:flipoutY;-ms-animation-name:flipoutY;animation-name:flipoutY;}

/* 闪烁 */

.a-flash{-webkit-animation-name:flash;-moz-animation-name:flash;-ms-animation-name:flash;animation-name:flash;}

/* 震颤 */

.a-shake{-webkit-animation-name:shake;-moz-animation-name:shake;-ms-animation-name:shake;animation-name:shake;}

/* 摇摆 */

.a-swing{-webkit-animation-name:swing;-moz-animation-name:swing;-ms-animation-name:swing;animation-name:swing;}

/* 摇晃 */

.a-wobble{-webkit-animation-name:wobble;-moz-animation-name:wobble;-ms-animation-name:wobble;animation-name:wobble;}

/* 震铃 */

.a-ring{-webkit-animation-name:ring;-moz-animation-name:ring;-ms-animation-name:ring;animation-name:ring;}

/* define */

/* 淡入 */

@-webkit-keyframes fadein{

    0%{opacity:;}

    100%{opacity:;}

}

@-moz-keyframes fadein{

    0%{opacity:;}

    100%{opacity:;}

}

@-ms-keyframes fadein{

    0%{opacity:;}

    100%{opacity:;}

}

@keyframes fadein{

    0%{opacity:;}

    100%{opacity:;}

}

/* 淡入-从上 */

@-webkit-keyframes fadeinT{

    0%{opacity:;-webkit-transform:translateY(-100px);}

    100%{opacity:;-webkit-transform:translateY(0);}

}

@-moz-keyframes fadeinT{

    0%{opacity:;-moz-transform:translateY(-100px);}

    100%{opacity:;-moz-transform:translateY(0);}

}

@-ms-keyframes fadeinT{

    0%{opacity:;-ms-transform:translateY(-100px);}

    100%{opacity:;-ms-transform:translateY(0);}

}

@keyframes fadeinT{

    0%{opacity:;transform:translateY(-100px);}

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

}

/* 淡入-从右 */

@-webkit-keyframes fadeinR{

    0%{opacity:;-webkit-transform:translateX(100px);}

    100%{opacity:;-webkit-transform:translateX(0);}

}

@-moz-keyframes fadeinR{

    0%{opacity:;-moz-transform:translateX(100px);}

    100%{opacity:;-moz-transform:translateX(0);}

}

@-ms-keyframes fadeinR{

    0%{opacity:;-ms-transform:translateX(100px);}

    100%{opacity:;-ms-transform:translateX(0);}

}

@keyframes fadeinR{

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

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

}

/* 淡入-从下 */

@-webkit-keyframes fadeinB{

    0%{opacity:;-webkit-transform:translateY(100px);}

    100%{opacity:;-webkit-transform:translateY(0);}

}

@-moz-keyframes fadeinB{

    0%{opacity:;-moz-transform:translateY(100px);}

    100%{opacity:;-moz-transform:translateY(0);}

}

@-ms-keyframes fadeinB{

    0%{opacity:;-ms-transform:translateY(100px);}

    100%{opacity:;-ms-transform:translateY(0);}

}

@keyframes fadeinB{

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

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

}

/* 淡入-从左 */

@-webkit-keyframes fadeinL{

    0%{opacity:;-webkit-transform:translateX(-100px);}

    100%{opacity:;-webkit-transform:translateX(0);}

}

@-moz-keyframes fadeinL{

    0%{opacity:;-moz-transform:translateX(-100px);}

    100%{opacity:;-moz-transform:translateX(0);}

}

@-ms-keyframes fadeinL{

    0%{opacity:;-ms-transform:translateX(-100px);}

    100%{opacity:;-ms-transform:translateX(0);}

}

@keyframes fadeinL{

    0%{opacity:;transform:translateX(-100px);}

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

}

/* 淡出 */

@-webkit-keyframes fadeout{

    0%{opacity:;}

    100%{opacity:;}

}

@-moz-keyframes fadeout{

    0%{opacity:;}

    100%{opacity:;}

}

@-ms-keyframes fadeout{

    0%{opacity:;}

    100%{opacity:;}

}

@keyframes fadeout{

    0%{opacity:;}

    100%{opacity:;}

}

/* 淡出-向上 */

@-webkit-keyframes fadeoutT{

    0%{opacity:;-webkit-transform:translateY(0);}

    100%{opacity:;-webkit-transform:translateY(-100px);}

}

@-moz-keyframes fadeoutT{

    0%{opacity:;-moz-transform:translateY(0);}

    100%{opacity:;-moz-transform:translateY(-100px);}

}

@-ms-keyframes fadeoutT{

    0%{opacity:;-ms-transform:translateY(0);}

    100%{opacity:;-ms-transform:translateY(-100px);}

}

@keyframes fadeoutT{

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

    100%{opacity:;transform:translateY(-100px);}

}

/* 淡出-向右 */

@-webkit-keyframes fadeoutR{

    0%{opacity:;-webkit-transform:translateX(0);}

    100%{opacity:;-webkit-transform:translateX(100px);}

}

@-moz-keyframes fadeoutR{

    0%{opacity:;-moz-transform:translateX(0);}

    100%{opacity:;-moz-transform:translateX(100px);}

}

@-ms-keyframes fadeoutR{

    0%{opacity:;-ms-transform:translateX(0);}

    100%{opacity:;-ms-transform:translateX(100px);}

}

@keyframes fadeoutR{

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

    100%{opacity:;transform:translateX(100px);}

}

/* 淡出-向下 */

@-webkit-keyframes fadeoutB{

    0%{opacity:;-webkit-transform:translateY(0);}

    100%{opacity:;-webkit-transform:translateY(100px);}

}

@-moz-keyframes fadeoutB{

    0%{opacity:;-moz-transform:translateY(0);}

    100%{opacity:;-moz-transform:translateY(100px);}

}

@-ms-keyframes fadeoutB{

    0%{opacity:;-ms-transform:translateY(0);}

    100%{opacity:;-ms-transform:translateY(100px);}

}

@keyframes fadeoutB{

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

    100%{opacity:;transform:translateY(100px);}

}

/* 淡出-向左 */

@-webkit-keyframes fadeoutL{

    0%{opacity:;-webkit-transform:translateX(0);}

    100%{opacity:;-webkit-transform:translateX(-100px);}

}

@-moz-keyframes fadeoutL{

    0%{opacity:;-moz-transform:translateX(0);}

    100%{opacity:;-moz-transform:translateX(-100px);}

}

@-ms-keyframes fadeoutL{

    0%{opacity:;-ms-transform:translateX(0);}

    100%{opacity:;-ms-transform:translateX(-100px);}

}

@keyframes fadeoutL{

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

    100%{opacity:;transform:translateX(-100px);}

}

/* 弹跳 */

@-webkit-keyframes bounce{

    0%,20%,50%,80%,100%{-webkit-transform:translateY(0);}

    40%{-webkit-transform:translateY(-30px);}

    60%{-webkit-transform:translateY(-15px);}

}

@-moz-keyframes bounce{

    0%,20%,50%,80%,100%{-moz-transform:translateY(0);}

    40%{-moz-transform:translateY(-30px);}

    60%{-moz-transform:translateY(-15px);}

}

@-ms-keyframes bounce{

    0%,20%,50%,80%,100%{-ms-transform:translateY(0);}

    40%{-ms-transform:translateY(-30px);}

    60%{-ms-transform:translateY(-15px);}

}

@keyframes bounce{

    0%,20%,50%,80%,100%{transform:translateY(0);}

    40%{transform:translateY(-30px);}

    60%{transform:translateY(-15px);}

}

/* 弹入 */

@-webkit-keyframes bouncein{

    0%{opacity:;-webkit-transform:scale(0.3);}

    50%{opacity:;-webkit-transform:scale(1.05);}

    70%{-webkit-transform:scale(0.9);}

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

}

@-moz-keyframes bouncein{

    0%{opacity:;-moz-transform:scale(0.3);}

    50%{opacity:;-moz-transform:scale(1.05);}

    70%{-moz-transform:scale(0.9);}

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

}

@-ms-keyframes bouncein{

    0%{opacity:;-ms-transform:scale(0.3);}

    50%{opacity:;-ms-transform:scale(1.05);}

    70%{-ms-transform:scale(0.9);}

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

}

@keyframes bouncein{

    0%{opacity:;transform:scale(0.3);}

    50%{opacity:;transform:scale(1.05);}

    70%{transform:scale(0.9);}

    100%{transform:scale(1);}

}

/* 弹入-从上 */

@-webkit-keyframes bounceinT{

    0%{opacity:;-webkit-transform:translateY(-100px);}

    60%{opacity:;-webkit-transform:translateY(30px);}

    80%{-webkit-transform:translateY(-10px);}

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

}

@-moz-keyframes bounceinT{

    0%{opacity:;-moz-transform:translateY(-100px);}

    60%{opacity:;-moz-transform:translateY(30px);}

    80%{-moz-transform:translateY(-10px);}

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

}

@-ms-keyframes bounceinT{

    0%{opacity:;-ms-transform:translateY(-100px);}

    60%{opacity:;-ms-transform:translateY(30px);}

    80%{-ms-transform:translateY(-10px);}

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

}

@keyframes bounceinT{

    0%{opacity:;transform:translateY(-100px);}

    60%{opacity:;transform:translateY(30px);}

    80%{transform:translateY(-10px);}

    100%{transform:translateY(0);}

}

/* 弹入-从右 */

@-webkit-keyframes bounceinR{

    0%{opacity:;-webkit-transform:translateX(100px);}

    60%{opacity:;-webkit-transform:translateX(-30px);}

    80%{-webkit-transform:translateX(10px);}

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

}

@-moz-keyframes bounceinR{

    0%{opacity:;-moz-transform:translateX(100px);}

    60%{opacity:;-moz-transform:translateX(-30px);}

    80%{-moz-transform:translateX(10px);}

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

}

@-ms-keyframes bounceinR{

    0%{opacity:;-ms-transform:translateX(100px);}

    60%{opacity:;-ms-transform:translateX(-30px);}

    80%{-ms-transform:translateX(10px);}

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

}

@keyframes bounceinR{

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

    60%{opacity:;transform:translateX(-30px);}

    80%{transform:translateX(10px);}

    100%{transform:translateX(0);}

}

/* 弹入-从下 */

@-webkit-keyframes bounceinB{

    0%{opacity:;-webkit-transform:translateY(100px);}

    60%{opacity:;-webkit-transform:translateY(-30px);}

    80%{-webkit-transform:translateY(10px);}

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

}

@-moz-keyframes bounceinB{

    0%{opacity:;-moz-transform:translateY(100px);}

    60%{opacity:;-moz-transform:translateY(-30px);}

    80%{-moz-transform:translateY(10px);}

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

}

@-ms-keyframes bounceinB{

    0%{opacity:;-ms-transform:translateY(100px);}

    60%{opacity:;-ms-transform:translateY(-30px);}

    80%{-ms-transform:translateY(10px);}

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

}

@keyframes bounceinB{

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

    60%{opacity:;transform:translateY(-30px);}

    80%{transform:translateY(10px);}

    100%{transform:translateY(0);}

}

/* 弹入-从左 */

@-webkit-keyframes bounceinL{

    0%{opacity:;-webkit-transform:translateX(-100px);}

    60%{opacity:;-webkit-transform:translateX(30px);}

    80%{-webkit-transform:translateX(-10px);}

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

}

@-moz-keyframes bounceinL{

    0%{opacity:;-moz-transform:translateX(-100px);}

    60%{opacity:;-moz-transform:translateX(30px);}

    80%{-moz-transform:translateX(-10px);}

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

}

@-ms-keyframes bounceinL{

    0%{opacity:;-ms-transform:translateX(-100px);}

    60%{opacity:;-ms-transform:translateX(30px);}

    80%{-ms-transform:translateX(-10px);}

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

}

@keyframes bounceinL{

    0%{opacity:;transform:translateX(-100px);}

    60%{opacity:;transform:translateX(30px);}

    80%{transform:translateX(-10px);}

    100%{transform:translateX(0);}

}

/* 弹出 */

@-webkit-keyframes bounceout{

    0%{-webkit-transform:scale(1);}

    25%{-webkit-transform:scale(0.95);}

    50%{opacity:;-webkit-transform:scale(1.1);}

    100%{opacity:;-webkit-transform:scale(0.3);}

}

@-moz-keyframes bounceout{

    0%{-moz-transform:scale(1);}

    25%{-moz-transform:scale(0.95);}

    50%{opacity:;-moz-transform:scale(1.1);}

    100%{opacity:;-moz-transform:scale(0.3);}

}

@-ms-keyframes bounceout{

    0%{-ms-transform:scale(1);}

    25%{-ms-transform:scale(0.95);}

    50%{opacity:;-ms-transform:scale(1.1);}

    100%{opacity:;-ms-transform:scale(0.3);}

}

@keyframes bounceout{

    0%{transform:scale(1);}

    25%{transform:scale(0.95);}

    50%{opacity:;transform:scale(1.1);}

    100%{opacity:;transform:scale(0.3);}

}

/* 弹出-向上*/

@-webkit-keyframes bounceoutT{

    0%{-webkit-transform:translateY(0);}

    20%{opacity:;-webkit-transform:translateY(20px);}

    100%{opacity:;-webkit-transform:translateY(-100px);}

}

@-moz-keyframes bounceoutT{

    0%{-moz-transform:translateY(0);}

    20%{opacity:;-moz-transform:translateY(20px);}

    100%{opacity:;-moz-transform:translateY(-100px);}

}

@-ms-keyframes bounceoutT{

    0%{-ms-transform:translateY(0);}

    20%{opacity:;-ms-transform:translateY(20px);}

    100%{opacity:;-ms-transform:translateY(-100px);}

}

@keyframes bounceoutT{

    0%{transform:translateY(0);}

    20%{opacity:;transform:translateY(20px);}

    100%{opacity:;transform:translateY(-100px);}

}

/* 弹出-向右*/

@-webkit-keyframes bounceoutR{

    0%{-webkit-transform:translateX(0);}

    20%{opacity:;-webkit-transform:translateX(-20px);}

    100%{opacity:;-webkit-transform:translateX(100px);}

}

@-moz-keyframes bounceoutR{

    0%{-moz-transform:translateX(0);}

    20%{opacity:;-moz-transform:translateX(-20px);}

    100%{opacity:;-moz-transform:translateX(100px);}

}

@-ms-keyframes bounceoutR{

    0%{-ms-transform:translateX(0);}

    20%{opacity:;-ms-transform:translateX(-20px);}

    100%{opacity:;-ms-transform:translateX(100px);}

}

@keyframes bounceoutR{

    0%{transform:translateX(0);}

    20%{opacity:;transform:translateX(-20px);}

    100%{opacity:;transform:translateX(100px);}

}

/* 弹出-向下 */

@-webkit-keyframes bounceoutB{

    0%{-webkit-transform:translateY(0);}

    20%{opacity:;-webkit-transform:translateY(-20px);}

    100%{opacity:;-webkit-transform:translateY(100px);}

}

@-moz-keyframes bounceoutB{

    0%{-moz-transform:translateY(0);}

    20%{opacity:;-moz-transform:translateY(-20px);}

    100%{opacity:;-moz-transform:translateY(100px);}

}

@-ms-keyframes bounceoutB{

    0%{-ms-transform:translateY(0);}

    20%{opacity:;-ms-transform:translateY(-20px);}

    100%{opacity:;-ms-transform:translateY(100px);}

}

@keyframes bounceoutB{

    0%{transform:translateY(0);}

    20%{opacity:;transform:translateY(-20px);}

    100%{opacity:;transform:translateY(100px);}

}

/* 弹出-向左 */

@-webkit-keyframes bounceoutL{

    0%{-webkit-transform:translateX(0);}

    20%{opacity:;-webkit-transform:translateX(20px);}

    100%{opacity:;-webkit-transform:translateX(-100px);}

}

@-moz-keyframes bounceoutL{

    0%{-moz-transform:translateX(0);}

    20%{opacity:;-moz-transform:translateX(20px);}

    100%{opacity:;-moz-transform:translateX(-100px);}

}

@-ms-keyframes bounceoutL{

    0%{-ms-transform:translateX(0);}

    20%{opacity:;-ms-transform:translateX(20px);}

    100%{opacity:;-ms-transform:translateX(-100px);}

}

@keyframes bounceoutL{

    0%{transform:translateX(0);}

    20%{opacity:;transform:translateX(20px);}

    100%{opacity:;transform:translateX(-200px);}

}

/* 转入 */

@-webkit-keyframes rotatein{

    0%{opacity:;-webkit-transform:rotate(-200deg);}

    100%{opacity:;-webkit-transform:rotate(0);}

}

@-moz-keyframes rotatein{

    0%{opacity:;-moz-transform:rotate(-200deg);}

    100%{opacity:;-moz-transform:rotate(0);}

}

@-ms-keyframes rotatein{

    0%{opacity:;-ms-transform:rotate(-200deg);}

    100%{opacity:;-ms-transform:rotate(0);}

}

@keyframes rotatein{

    0%{opacity:;transform:rotate(-200deg);}

    100%{opacity:;transform:rotate(0);}

}

/* 转入-从左上 */

@-webkit-keyframes rotateinLT{

    0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:;}

    100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:;}

}

@-moz-keyframes rotateinLT{

    0%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:;}

    100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:;}

}

@-ms-keyframes rotateinLT{

    0%{-ms-transform-origin:left bottom;-ms-transform:rotate(-90deg);opacity:;}

    100%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:;}

}

@keyframes rotateinLT{

    0%{transform-origin:left bottom;transform:rotate(-90deg);opacity:;}

    100%{transform-origin:left bottom;transform:rotate(0);opacity:;}

}

/* 转入-从左下 */

@-webkit-keyframes rotateineftB{

    0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:;}

    100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:;}

}

@-moz-keyframes rotateineftB{

    0%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:;}

    100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:;}

}

@-ms-keyframes rotateineftB{

    0%{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:;}

    100%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:;}

}

@keyframes rotateineftB{

    0%{transform-origin:left bottom;transform:rotate(90deg);opacity:;}

    100%{transform-origin:left bottom;transform:rotate(0);opacity:;}

}

/* 转入-从右上 */

@-webkit-keyframes rotateinRT{

    0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:;}

    100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:;}

}

@-moz-keyframes rotateinRT{

    0%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:;}

    100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:;}

}

@-ms-keyframes rotateinRT{

    0%{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:;}

    100%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:;}

}

@keyframes rotateinRT{

    0%{transform-origin:right bottom;transform:rotate(90deg);opacity:;}

    100%{transform-origin:right bottom;transform:rotate(0);opacity:;}

}

/* 转入-从右下*/

@-webkit-keyframes rotateinRB{

    0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:;}

    100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:;}

}

@-moz-keyframes rotateinRB{

    0%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:;}

    100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:;}

}

@-ms-keyframes rotateinRB{

    0%{-ms-transform-origin:right bottom;-ms-transform:rotate(-90deg);opacity:;}

    100%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:;}

}

@keyframes rotateinRB{

    0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:;}

    100%{transform-origin:right bottom;transform:rotate(0);opacity:;}

}

/* 转出 */

@-webkit-keyframes rotateout{

    0%{-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:;}

    100%{-webkit-transform-origin:center center;-webkit-transform:rotate(200deg);opacity:;}

}

@-moz-keyframes rotateout{

    0%{-moz-transform-origin:center center;-moz-transform:rotate(0);opacity:;}

    100%{-moz-transform-origin:center center;-moz-transform:rotate(200deg);opacity:;}

}

@-ms-keyframes rotateout{

    0%{-ms-transform-origin:center center;-ms-transform:rotate(0);opacity:;}

    100%{-ms-transform-origin:center center;-ms-transform:rotate(200deg);opacity:;}

}

@keyframes rotateout{

    0%{transform-origin:center center;transform:rotate(0);opacity:;}

    100%{transform-origin:center center;transform:rotate(200deg);opacity:;}

}

/* 转出-向左上 */

@-webkit-keyframes rotateoutLT{

    0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:;}

    100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:;}

}

@-moz-keyframes rotateoutLT{

    0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:;}

    100%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:;}

}

@-ms-keyframes rotateoutLT{

    0%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:;}

    100%{-ms-transform-origin:left bottom;-ms-transform:rotate(-90deg);opacity:;}

}

@keyframes rotateoutLT{

    0%{transform-origin:left bottom;transform:rotate(0);opacity:;}

    100%{transform-origin:left bottom;transform:rotate(-90deg);opacity:;}

}

/* 转出-向左下 */

@-webkit-keyframes rotateoutLB{

    0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:;}

    100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:;}

}

@-moz-keyframes rotateoutLB{

    0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:;}

    100%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:;}

}

@-ms-keyframes rotateoutLB{

    0%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:;}

    100%{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:;}

}

@keyframes rotateoutLB{

    0%{transform-origin:left bottom;transform:rotate(0);opacity:;}

    100%{transform-origin:left bottom;transform:rotate(90deg);opacity:;}

}

/* 转出-向右上 */

@-webkit-keyframes rotateoutRT{

    0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:;}

    100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:;}

}

@-moz-keyframes rotateoutRT{

    0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:;}

    100%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:;}

}

@-ms-keyframes rotateoutRT{

    0%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:;}

    100%{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:;}

}

@keyframes rotateoutRT{

    0%{transform-origin:right bottom;transform:rotate(0);opacity:;}

    100%{transform-origin:right bottom;transform:rotate(90deg);opacity:;}

}

/* 转出-向右下 */

@-webkit-keyframes rotateoutBR{

    0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:;}

    100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:;}

}

@-moz-keyframes rotateoutBR{

    0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:;}

    100%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:;}

}

@-ms-keyframes rotateoutBR{

    0%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:;}

    100%{-ms-transform-origin:right bottom;-ms-transform:rotate(-90deg);opacity:;}

}

@keyframes rotateoutBR{

    0%{transform-origin:right bottom;transform:rotate(0);opacity:;}

    100%{transform-origin:right bottom;transform:rotate(-90deg);opacity:;}

}

/* 翻转 */

@-webkit-keyframes flip{

    0%{-webkit-transform:perspective(400px) rotateY(0);-webkit-animation-timing-function:ease-out;}

    40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg);-webkit-animation-timing-function:ease-out;}

    50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in;}

    80%{-webkit-transform:perspective(400px) rotateY(360deg) scale(0.95);-webkit-animation-timing-function:ease-in;}

    100%{-webkit-transform:perspective(400px) scale(1);-webkit-animation-timing-function:ease-in;}

}

@-moz-keyframes flip{

    0%{-moz-transform:perspective(400px) rotateY(0);-moz-animation-timing-function:ease-out;}

    40%{-moz-transform:perspective(400px) translateZ(150px) rotateY(170deg);-moz-animation-timing-function:ease-out;}

    50%{-moz-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-moz-animation-timing-function:ease-in;}

    80%{-moz-transform:perspective(400px) rotateY(360deg) scale(0.95);-moz-animation-timing-function:ease-in;}

    100%{-moz-transform:perspective(400px) scale(1);-moz-animation-timing-function:ease-in;}

}

@-ms-keyframes flip{

    0%{-ms-transform:perspective(400px) rotateY(0);-ms-animation-timing-function:ease-out;}

    40%{-ms-transform:perspective(400px) translateZ(150px) rotateY(170deg);-ms-animation-timing-function:ease-out;}

    50%{-ms-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-ms-animation-timing-function:ease-in;}

    80%{-ms-transform:perspective(400px) rotateY(360deg) scale(0.95);-ms-animation-timing-function:ease-in;}

    100%{-ms-transform:perspective(400px) scale(1);-ms-animation-timing-function:ease-in;}

}

@keyframes flip{

    0%{transform:perspective(400px) rotateY(0);animation-timing-function:ease-out;}

    40%{transform:perspective(400px) translateZ(150px) rotateY(170deg);animation-timing-function:ease-out;}

    50%{transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function:ease-in;}

    80%{transform:perspective(400px) rotateY(360deg) scale(0.95);animation-timing-function:ease-in;}

    100%{transform:perspective(400px) scale(1);animation-timing-function:ease-in;}

}

/* 翻入-X轴 */

@-webkit-keyframes flipinX{

    0%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:;}

    40%{-webkit-transform:perspective(400px) rotateX(-10deg);}

    70%{-webkit-transform:perspective(400px) rotateX(10deg);}

    100%{-webkit-transform:perspective(400px) rotateX(0);opacity:;}

}

@-moz-keyframes flipinX{

    0%{-moz-transform:perspective(400px) rotateX(90deg);opacity:;}

    40%{-moz-transform:perspective(400px) rotateX(-10deg);}

    70%{-moz-transform:perspective(400px) rotateX(10deg);}

    100%{-moz-transform:perspective(400px) rotateX(0);opacity:;}

}

@-ms-keyframes flipinX{

    0%{-ms-transform:perspective(400px) rotateX(90deg);opacity:;}

    40%{-ms-transform:perspective(400px) rotateX(-10deg);}

    70%{-ms-transform:perspective(400px) rotateX(10deg);}

    100%{-ms-transform:perspective(400px) rotateX(0);opacity:;}

}

@keyframes flipinX{

    0%{transform:perspective(400px) rotateX(90deg);opacity:;}

    40%{transform:perspective(400px) rotateX(-10deg);}

    70%{transform:perspective(400px) rotateX(10deg);}

    100%{transform:perspective(400px) rotateX(0);opacity:;}

}

/* 翻入-Y轴 */

@-webkit-keyframes flipinY{

    0%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:;}

    40%{-webkit-transform:perspective(400px) rotateY(-10deg);}

    70%{-webkit-transform:perspective(400px) rotateY(10deg);}

    100%{-webkit-transform:perspective(400px) rotateY(0);opacity:;}

}

@-moz-keyframes flipinY{

    0%{-moz-transform:perspective(400px) rotateY(90deg);opacity:;}

    40%{-moz-transform:perspective(400px) rotateY(-10deg);}

    70%{-moz-transform:perspective(400px) rotateY(10deg);}

    100%{-moz-transform:perspective(400px) rotateY(0);opacity:;}

}

@-ms-keyframes flipinY{

    0%{-ms-transform:perspective(400px) rotateY(90deg);opacity:;}

    40%{-ms-transform:perspective(400px) rotateY(-10deg);}

    70%{-ms-transform:perspective(400px) rotateY(10deg);}

    100%{-ms-transform:perspective(400px) rotateY(0);opacity:;}

}

@keyframes flipinY{

    0%{transform:perspective(400px) rotateY(90deg);opacity:;}

    40%{transform:perspective(400px) rotateY(-10deg);}

    70%{transform:perspective(400px) rotateY(10deg);}

    100%{transform:perspective(400px) rotateY(0);opacity:;}

}

/* 翻出-X轴 */

@-webkit-keyframes flipoutX{

    0%{-webkit-transform:perspective(400px) rotateX(0);opacity:;}

    100%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:;}

}

@-moz-keyframes flipoutX{

    0%{-moz-transform:perspective(400px) rotateX(0);opacity:;}

    100%{-moz-transform:perspective(400px) rotateX(90deg);opacity:;}

}

@-ms-keyframes flipoutX{

    0%{-ms-transform:perspective(400px) rotateX(0);opacity:;}

    100%{-ms-transform:perspective(400px) rotateX(90deg);opacity:;}

}

@keyframes flipoutX{

    0%{transform:perspective(400px) rotateX(0);opacity:;}

    100%{transform:perspective(400px) rotateX(90deg);opacity:;}

}

/* 翻出-Y轴 */

@-webkit-keyframes flipoutY{

    0%{-webkit-transform:perspective(400px) rotateY(0);opacity:;}

    100%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:;}

}

@-moz-keyframes flipoutY{

    0%{-moz-transform:perspective(400px) rotateY(0);opacity:;}

    100%{-moz-transform:perspective(400px) rotateY(90deg);opacity:;}

}

@-ms-keyframes flipoutY{

    0%{-ms-transform:perspective(400px) rotateY(0);opacity:;}

    100%{-ms-transform:perspective(400px) rotateY(90deg);opacity:;}

}

@keyframes flipoutY{

    0%{transform:perspective(400px) rotateY(0);opacity:;}

    100%{transform:perspective(400px) rotateY(90deg);opacity:;}

}

/* 闪烁 */

@-webkit-keyframes flash{

    0%,50%,100%{opacity:;}

    25%,75%{opacity:;}

}

@-moz-keyframes flash{

    0%,50%,100%{opacity:;}

    25%,75%{opacity:;}

}

@-ms-keyframes flash{

    0%,50%,100%{opacity:;}

    25%,75%{opacity:;}

}

@keyframes flash{

    0%,50%,100%{opacity:;}

    25%,75%{opacity:;}

}

/* 震颤 */

@-webkit-keyframes shake{

    0%,100%{-webkit-transform:translateX(0);}

    10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);}

    20%,40%,60%,80%{-webkit-transform:translateX(10px);}

}

@-moz-keyframes shake{

    0%,100%{-moz-transform:translateX(0);}

    10%,30%,50%,70%,90%{-moz-transform:translateX(-10px);}

    20%,40%,60%,80%{-moz-transform:translateX(10px);}

}

@-ms-keyframes shake{

    0%,100%{-ms-transform:translateX(0);}

    10%,30%,50%,70%,90%{-ms-transform:translateX(-10px);}

    20%,40%,60%,80%{-ms-transform:translateX(10px);}

}

@keyframes shake{

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

    10%,30%,50%,70%,90%{transform:translateX(-10px);}

    20%,40%,60%,80%{transform:translateX(10px);}

}

/* 摇摆 */

@-webkit-keyframes swing{

    20%{-webkit-transform:rotate(15deg);}

    40%{-webkit-transform:rotate(-10deg);}

    60%{-webkit-transform:rotate(5deg);}

    80%{-webkit-transform:rotate(-5deg);}

    100%{-webkit-transform:rotate(0);}

}

@-moz-keyframes swing{

    20%{-moz-transform:rotate(15deg);}

    40%{-moz-transform:rotate(-10deg);}

    60%{-moz-transform:rotate(5deg);}

    80%{-moz-transform:rotate(-5deg);}

    100%{-moz-transform:rotate(0);}

}

@-ms-keyframes swing{

    20%{-ms-transform:rotate(15deg);}

    40%{-ms-transform:rotate(-10deg);}

    60%{-ms-transform:rotate(5deg);}

    80%{-ms-transform:rotate(-5deg);}

    100%{-ms-transform:rotate(0);}

}

@keyframes swing{

    20%{transform:rotate(15deg);}

    40%{transform:rotate(-10deg);}

    60%{transform:rotate(5deg);}

    80%{transform:rotate(-5deg);}

    100%{transform:rotate(0);}

}

/* 摇晃 */

@-webkit-keyframes wobble{

    0%{-webkit-transform:translateX(0);}

    15%{-webkit-transform:translateX(-100px) rotate(-5deg);}

    30%{-webkit-transform:translateX(80px) rotate(3deg);}

    45%{-webkit-transform:translateX(-65px) rotate(-3deg);}

    60%{-webkit-transform:translateX(40px) rotate(2deg);}

    75%{-webkit-transform:translateX(-20px) rotate(-1deg);}

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

}

@-moz-keyframes wobble{

    0%{-moz-transform:translateX(0);}

    15%{-moz-transform:translateX(-100px) rotate(-5deg);}

    30%{-moz-transform:translateX(80px) rotate(3deg);}

    45%{-moz-transform:translateX(-65px) rotate(-3deg);}

    60%{-moz-transform:translateX(40px) rotate(2deg);}

    75%{-moz-transform:translateX(-20px) rotate(-1deg);}

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

}

@-ms-keyframes wobble{

    0%{-ms-transform:translateX(0);}

    15%{-ms-transform:translateX(-100px) rotate(-5deg);}

    30%{-ms-transform:translateX(80px) rotate(3deg);}

    45%{-ms-transform:translateX(-65px) rotate(-3deg);}

    60%{-ms-transform:translateX(40px) rotate(2deg);}

    75%{-ms-transform:translateX(-20px) rotate(-1deg);}

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

}

@keyframes wobble{

    0%{transform:translateX(0);}

    15%{transform:translateX(-100px) rotate(-5deg);}

    30%{transform:translateX(80px) rotate(3deg);}

    45%{transform:translateX(-65px) rotate(-3deg);}

    60%{transform:translateX(40px) rotate(2deg);}

    75%{transform:translateX(-20px) rotate(-1deg);}

    100%{transform:translateX(0);}

}

/* 震铃 */

@-webkit-keyframes ring{

    0%{-webkit-transform:scale(1);}

    10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);}

    30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);}

    40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);}

    100%{-webkit-transform:scale(1) rotate(0);}

}

@-moz-keyframes ring{

    0%{-moz-transform:scale(1);}

    10%,20%{-moz-transform:scale(0.9) rotate(-3deg);}

    30%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg);}

    40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg);}

    100%{-moz-transform:scale(1) rotate(0);}

}

@-ms-keyframes ring{

    0%{-ms-transform:scale(1);}

    10%,20%{-ms-transform:scale(0.9) rotate(-3deg);}

    30%,50%,70%,90%{-ms-transform:scale(1.1) rotate(3deg);}

    40%,60%,80%{-ms-transform:scale(1.1) rotate(-3deg);}

    100%{-ms-transform:scale(1) rotate(0);}

}

@keyframes ring{

    0%{transform:scale(1);}

    10%,20%{transform:scale(0.9) rotate(-3deg);}

    30%,50%,70%,90%{transform:scale(1.1) rotate(3deg);}

    40%,60%,80%{transform:scale(1.1) rotate(-3deg);}

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

}

学习 | css3基本动画之demo篇的更多相关文章

  1. [CSS3] 学习笔记-CSS动画特效

    在CSS3中,出现了很多出彩的效果,例如2D.3D以及过度.动画和多列等.这些效果为页面设计添加了很多的可选设计. 1.2D.3D转换 转换,是使元素改变尺寸.形状.位置的一种效果:通过CSS3转换, ...

  2. 编写自己的代码库(css3常用动画的实现)

    编写自己的代码库(css3常用动画的实现) 1.前言 在月初的时候,发了CSS3热身实战--过渡与动画(实现炫酷下拉,手风琴,无缝滚动).js的代码库也发过两次,两篇文章.之前也写了css3的热身实战 ...

  3. 使用css3的动画模拟太阳系行星公转

    本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...

  4. css3 animation动画技巧

    一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...

  5. 纯CSS3冒泡动画按钮实现教程

    这款CSS3动画按钮非常的有创意,鼠标在滑过按钮时并不像其他按钮那样仅仅改变按钮的背景颜色,而是出现很酷的冒泡动画.这么惊艳的CSS3动画按钮,这篇文章主要将按钮实现的过程和代码分享给大家,希望能给在 ...

  6. SVG 学习<五> SVG动画

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  7. 数百个 HTML5 例子学习 HT 图形组件 – 3D建模篇

    http://www.hightopo.com/demo/pipeline/index.html <数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇>里提到 HT 很 ...

  8. 数百个 HTML5 例子学习 HT 图形组件 – 3D 建模篇

    http://www.hightopo.com/demo/pipeline/index.html <数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇>里提到 HT 很 ...

  9. CSS3知识点整理&&一些demo

    css3能做什么 响应式开发的基础,然后能实现一些酷炫的效果咯. 以下案例纯css3实现,一点都没用js (入门简单,但是水很深) 叮当猫纯用css3做出         http://codepen ...

随机推荐

  1. SQL Server 异常代码处理

    SQL Server使用TRY...CATCH 结构实现TSQL语句的错误处理,TRY命令负责监控语句执行的情况,如果有TSQL语句发生异常,并且严重级别(Severity Level)大于10,并且 ...

  2. MapReduce之MapJoin案例

    @ 目录 使用场景 优点 具体办法:采用DistributedCache 案例 需求分析 代码实现 使用场景 Map Join 适用于一张表十分小.一张表很大的场景. 优点 思考:在Reduce 端处 ...

  3. 四则运算生成命令行程序 (Python)

    Github项目地址:Github Pages 结对项目成员:张鹏 3118004985 郑靓 3118004988 一.项目需求分析 二.功能实现 三.代码实现or功能说明 ★ GUI功能扩展说明 ...

  4. vuex的模块化使用

    store文件如下 1.modules下文件是模块化的划分,里面的js有state,action,mutations.然后通过 export default { namespaced: true, s ...

  5. P2607 [ZJOI2008]骑士 基环树，树dp;

    P2607 [ZJOI2008]骑士 本题本质上就是树dp,和没有上司的舞会差不多,只不过多了一个对基环树的处理. #include<iostream> #include<cstri ...

  6. 给你的Swagger文档换套附魔皮肤吧

    前言 相信无论是前端或是后端的程序员对Swagger都不怎么陌生,没有用过应该也听说过 Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务. 简 ...

  7. Lombok插件有望被Intellij IDEA收编以改善兼容性问题

    1. 前言 最近两个版本的Intellij IDEA没有办法使用lombok插件了,这种问题已经出现了多次,导致胖哥依然使用2020.1的旧版本.其实很多人和我一样也回滚到了旧版本.我一直认为是lom ...

  8. 启动Spring后，连接mysql报错

    连接失败,原因是Mysql服务未启动 解决方法:启动mysql服务 方法一: 以管理员身份运行CMD 输入命令:net start mysql 方法二: 右键计算机-管理-服务和应用程序-服务 右键启 ...

  9. laravel中elastisearch安装和测试运行是否成功（注意是windows下的操作）

    1.去elasticsearch官网下载,如果太慢可以在我上一个随笔看下载地址 2.下载完解压缩,在cmd中找到到elasticsearch的bin目录下执行.\elasticsearch.bat - ...

  10. [第二届全国中学生网络安全竞赛]bypass

    前几天拿到了线下赛的源码,做做看.这道主要是命令执行的黑名单绕过 先看看给出的代码: <?php highlight_file(__FILE__); error_reporting(0); $b ...