<style type="text/css">

h1{background:#999;}

h1:hover{border-left:10px solid #000;padding-left:15px;background:#33ccff;transition:all .5s;}

</style>

<h1>一句话就有css3动画</h1>

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

<style type="text/css">

.box{position:absolute;top:0;right:0;width:800px;height:350px;border-left:1px solid #b9b9b9;border-bottom:1px solid #b9b9b9;z-index:1;}

.box .zhu-base{position:absolute;bottom:0;width:64px;height:10px;}

.box .bg-orange{background:#ff7200;}

.box .bg-violet{background:#c8d1f2;}

.box .zhu1{left:73px;}

.box .zhu2{left:227px;}

.box .zhu3{left:381px;}

.box .zhu4{left:535px;}

.box .zhu1.anima{height:80px; -webkit-animation:height .6s 0.1s ease backwards}/* 第一个参数是keyframe的名称；第二个参数是播放时间；第三个参数是从几秒后开始播放；第四个参数是动画的速度曲线；第五个参数是动画时间之外的状态 */

.box .zhu2.anima{height:128px;-webkit-animation:height .6s 0.9s ease backwards}

.box .zhu3.anima{height:160px;-webkit-animation:height .6s 1.7s ease backwards}

.box .zhu4.anima{height:320px;-webkit-animation:height .6s 2.5s ease backwards}

/*** css3动画 start ***/

/* http://s1.xxx.com//msite/css/gallerynews.css?v=2016032102  */

/*向下淡入*/

@-webkit-keyframes fadeInDown{0%{-webkit-transform: translate3d(0, -20px, 0);transform: translate3d(0, -20px, 0);opacity:0;} 100%{-webkit-transform: none;transform: none;opacity:1;}}

/*向上淡入*/

@-webkit-keyframes fadeInUp{0%{-webkit-transform: translate3d(0, 20px, 0);transform: translate3d(0, 20px, 0);opacity:0;} 100%{-webkit-transform: none;transform: none;opacity:1;}}

/*向左淡入*/

@-webkit-keyframes fadeInLeft{0%{-webkit-transform: translate3d(200px,0 , 0);transform: translate3d(200px, 0, 0);opacity:0;} 100%{-webkit-transform: none;transform: none;opacity:1;}}

/*向右淡入*/

@-webkit-keyframes fadeInRight{0%{-webkit-transform: translate3d(-100px,0 , 0);transform: translate3d(-100px, 0, 0);opacity:0;} 100%{-webkit-transform: none;transform: none;opacity:1;}}

/*缩放*/

@-webkit-keyframes scale{0%{-webkit-transform: scale(0);-ms-transform: scale(0);transform: scale(0);opacity:0;} 100%{-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);opacity:1;}}

/*高度*/

@-webkit-keyframes height{0%{height:0;} 100%{-webkit-transition:none;-ms-transform:none;transition:none;}}

/*闪烁*/

@keyframes flash {0%,100%,50%{opacity:1}25%,75%{opacity:0}}

/*** css3动画 end ***/

</style>

<div class="box">

    <div class="zhu-base anima zhu1 bg-violet"></div>

    <div class="zhu-base anima zhu2 bg-orange"></div>

    <div class="zhu-base anima zhu3 bg-violet"></div>

    <div class="zhu-base anima zhu4 bg-violet"></div>

</div>

//javascript获取浏览器内核、版本函数

Browser = {

    version: "",//版本

    core: "",//内核

    userAgent: "",//userAgent

    init: function() {//初始化(遍历img,取出图片url,发ajax请求)

        var ua = navigator.userAgent.toLowerCase();

        var s;

        var name ='';

        var ver = 0;

        Browser.userAgent=ua;

        //探测浏览器

        (s = ua.match(/msie ([\d.]+)/)) ? Browser._set("ie", Browser._setVersion(s[1])):

        (s = ua.match(/firefox\/([\d.]+)/)) ? Browser._set("firefox", Browser._setVersion(s[1])) :

        (s = ua.match(/chrome\/([\d.]+)/)) ? Browser._set("chrome", Browser._setVersion(s[1])) :

        (s = ua.match(/opera.([\d.]+)/)) ? Browser._set("opera", Browser._setVersion(s[1])) :

        (s = ua.match(/version\/([\d.]+).*safari/)) ? Browser._set("safari", Browser._setVersion(s[1])) : 0;

    },

    _setVersion: function(ver,floatLength) {

        ver = ('' + ver).replace(/_/g, '.');

        floatLength = floatLength || 1;

        ver = String(ver).split('.');

        ver = ver[0] + '.' + (ver[1] || '0');

        ver = Number(ver).toFixed(floatLength);

        return ver;

    },

    _set: function(bname,bver) {

        Browser.core=bname;

        Browser.version=bver;

    },

    supportCss3: function(style) {

        var prefix = ['webkit', 'Moz', 'ms', 'o'],

            i,

            humpString = [],

            htmlStyle = document.documentElement.style,

            _toHumb = function (string) {

                return string.replace(/-(\w)/g, function ($0, $1) {

                    return $1.toUpperCase();

                });

            }; 

        for (i in prefix)

        humpString.push(_toHumb(prefix[i] + '-' + style));

        humpString.push(_toHumb(style));

        for (i in humpString)

        if (humpString[i] in htmlStyle) return true;

        return false;

    },

};

//Browser.init();

//document.write("<br><b>内核</b>    "+Browser.core);//浏览器内核。

//document.write("<br><b>版本</b>    "+Browser.version);//浏览器版本。

//document.write("<br><b>userAgent</b>    "+Browser.userAgent);//浏览器信息。

//document.write("<br><b>animation-play-state</b>    "+Browser.supportCss3('animation-play-state'));//浏览器是否支持 css3。

<style type="text/css">

.trans{webkit-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;-ms-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;transition:all 0.3s ease-out;}/* transition 动画*/

.trans-padding{

    -webkit-transition: padding .2s linear;

    -moz-transition: padding .2s linear;

    -o-transition: padding .2s linear;

    transition: padding .2s linear;

}

.trans-height{

    -webkit-transition:height .2s linear;

    -moz-transition: height .2s linear;

    -o-transition: height.2s linear;

    transition: height.2s linear;

}

.li{display:block;line-height:30px;font-size:14px;}

.li:hover{padding-left:20px;background:#cc0000;color:#fff;}

</style>

<div>

<a class="li trans-padding">trans</a>

<a class="li trans-padding">trans</a>

</div>

<style type="text/css">

.circleRotate {position:relative;display:block;width:188px;height:188px;margin: 0 auto;}

.circleRotate .img{position:absolute;display:block;top:0;left:0;width:100%;height:100%;}

@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.circleRotate:hover img.spin {

    -webkit-animation: spin 20s linear infinite;

    -moz-animation: spin 20s linear infinite;

    animation: spin 20s linear infinite;

    z-index:2;

}

</style>

<a href="##" class="circleRotate">

    <img class="img" src="http://www.ztedevice.com.cn/Asserts/Device/images/index/circle_yellow_med.png">
<img class="img spin" src="http://www.ztedevice.com.cn/Asserts/Device/images/index/circle_yellow_big.png"><!-- 外环旋转动画 -->

</a>

<style type="text/css">

.div000{

width:50px;height:50px;display:block;position:relative;border:1px solid #2874a9;border-radius:50%;    background:url(http://www.wyzc.com/public/themes/newuplook/header/images/ico-flowchart.png) 0 0 no-repeat;

-webkit-transition:0.8s !important;

-moz-transition:0.8s !important;

-o-transition:0.8s !important;

-ms-transition:0.8s !important;

}

.div000:hover {background-color:#2874a9;

transform:rotate(360deg);

-webkit-transform:rotate(720deg);

-moz-transform:rotate(360deg);

-o-transform:rotate(360deg);

-ms-transform:rotate(360deg);

}

.div1{background-position:-125px -125px;}

.div1:hover{background-position:-125px -185px;}

</style>

<div class="div000 div1"></div>

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

<script type="text/javascript">

$(function(){

    //关闭底部(X按钮)

    $("#ppbb .ppmaxbox .js-close").click(function(){
$('#ppbb .ppmaxbox').animate({'left':'-100%','bottom':0},500,function(){

            $("#ppbb .ppminbox").animate({'left':0});

        });

    });

    //展开底部

    $("#ppbb .ppminbox .js-close").click(function(){
$('#ppbb .ppminbox').animate({'left':'-100%','bottom':0},500,function(){

            $("#ppbb .ppmaxbox").animate({'left':0},500);

        });

    });

});

</script>

<style type="text/css">

#ppbb{display:block;position:fixed;left:0;bottom:0;width:100%;height:150px;overflow:hidden;font-family:'Microsoft YaHei';z-index:99;}

#ppbb .ppminbox{position:absolute;width:158px;left:-158px;bottom:0;}/*缩小后的小窗*/

#ppbb .ppminbox .close{cursor:pointer;width:106px;height:150px;}

#ppbb .ppmaxbox{position:relative;width:100%;}/*正常的大窗*/

#ppbb .ppmaxbox .mask{position:absolute;left:0;right:0;top:0;bottom:0;background:#000;opacity:0.8;filter:alpha(opacity=80);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";}

#ppbb .ppmaxbox .ppbox1190{position:relative;width:1190px;height:150px;margin:0 auto;}/*正常大窗 里面的1190宽度的容器*/

#ppbb .ppmaxbox .ppbox1190 .close{position:absolute;top:10px;right:0;width:40px;height:40px;cursor:pointer;z-index:3;font-size:16px;font-weight:bold;color:#a7a7a7;background: no-repeat center;}

#ppbb .ppmaxbox .ppbox1190 .content{color:#fff;}

</style>

<!-- 底部弹窗 start -->

<div class="ppbb clearfix" id="ppbb">

    <div class="ppminbox">

        <img src="http://www.nmg.xinhuanet.com/xwzx/2006-07/18/xin_12070318091409303421.jpg" height="103" width="158" class="close js-close">

    </div>

    <div class="ppmaxbox">

        <div class="mask"></div>

        <div class="ppbox1190">

            <div class="close js-close">x</div>

            <div class="content">这是内容……</div>

        </div>

    </div>

</div>

<!-- 底部弹窗 end -->

<style>

body,ul{margin:0;padding:0;list-style-type:none;}

.container{width:500px;height:100px;position:relative;margin: 0 auto;overflow:hidden;}

.container:hover ul{animation-play-state:paused;}

ul{position:absolute;left:0;top:0;width:1200px;}

ul > li{float:left;width:100px;height:100px;}

/*

ul > li:nth-child(odd){background-color:#9933cc;}

ul > li:nth-child(even){background-color:#99cc00;}

*/

@keyframes doMove{    /*从左到右 从右到左*/

    form{left:0;}

    50%{left:-300px;}

    to{left:0;}

}

@keyframes doMove2{    /*从左到右，再从左到右*/

    form{left:0;}

    to{left:-300px;}    /*总宽度-5个的宽度（8个乘 100-500）*/

}

ul{animation:doMove2 7s linear infinite;}

</style>

<div class="container">

    <ul>

        <li>1111</li>

        <li>2222</li>

        <li>333</li>

        <li>444</li>

        <li>555</li>

        <li>666</li>

        <li>777</li>

        <li>88</li>

    </ul>

</div>