!!学习笔记：CSS3动画

 

一句话就有css3动画:　　2016-6-29

<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>

 

 

http://www.cnblogs.com/qq21270/p/4962970.html 　　代码：css3动画效果demo（本人代码）　　2016-4-1

 

http://www.css3maker.com/　　CSS3代码生成工具　　2015-11-10

http://www.uucat.com/css3_animation.php 　　CSS3代码生成工具　　2015-11-10

http://isux.tencent.com/css3/tools.html 　　CSS3动画工具　　2015-11-9

http://www.dowebok.com/demo/2014/98/　　CSS3动画库Animate.css　（最新版3.5.0有76种效果，32282★ ）　2016-3-18 　　https://daneden.github.io/animate.css/

http://www.webhek.com/css-animation-transition　　CSS动画：transition 的用法介绍　　2016-6-2

 

http://www.w3school.com.cn/css3/css3_animation.asp 　　CSS3 动画

http://www.css88.com/book/css/properties/animation/animation-fill-mode.htm 　　看说明

perspective:800px;　　　　perspective 属性只影响 3D 转换元素　　2016-6-7

https://isux.tencent.com/css-animation-skills.html　　经验分享：多屏复杂动画CSS技巧三则　　2016-6-24

 

http://www.jq22.com/js/a1.html 　　canvas蜂窝格

http://www.jq22.com/js/a2.html 　　 css3漂亮的大花　　2016-4-18

http://www.jq22.com/js/a3.html 　　 canvas正方形格

http://www.jq22.com/js/a4.html 　　 canvas小点点和连线

http://www.jq22.com/js/a5.html 　　 canvas星空

http://www.jq22.com/js/a6.html 　　 canvas银河系

http://www.jq22.com/js/a7.html 　　 canvas鼠标感应的散点

http://www.jq22.com/js/a8.html 　　 canvas烟花

http://www.w3cfuns.com/notes/26894/9e5266e5000e288ad6f90b6357a2fe4f/page/1.html　　自定义银河系（效果吊炸天）　　2016-6-13

 

@keyframes 规定动画
animation 　　　　　　　　　　所有动画属性的简写属性，除了 animation-play-state 属性
animation-name 　　             规定 @keyframes 动画的名称
animation-duration 　　　　　 规定动画完成一个周期所花费的秒或毫秒。默认是 0
animation-timing-function 　规定动画的速度曲线。默认是 "ease"

　　　　　　　　　　　　　　linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
　　　　　　　　　　　　　　ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
　　　　　　　　　　　　　　ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
　　　　　　　　　　　　　　ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
　　　　　　　　　　　　　　ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
　　　　　　　　　　　　　　step-start：等同于 steps(1, start)
　　　　　　　　　　　　　　step-end：等同于 steps(1, end)
　　　　　　　　　　　　　　steps(<integer>[, [ start | end ] ]?)：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
　　　　　　　　　　　　　　cubic-bezier(<number>, <number>, <number>, <number>)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

animation-delay 　　　　　　   规定动画何时开始。默认是 0
animation-iteration-count  　规定动画被播放的次数。默认是 1
animation-direction　　　　   (normal|alternate) 规定动画是否在下一周期逆向地播放。默认是 "normal"
animation-play-state 　　 　  (paused|running)规定动画是否正在运行或暂停。默认是 "running"
animation-fill-mode　　　　  (none | forwards | backwards | both) 规定对象动画时间之外的状态

　　　　　　　　　　　　　　none：默认值。不设置对象动画之外的状态
　　　　　　　　　　　　　　forwards：设置对象状态为动画结束时的状态
　　　　　　　　　　　　　　backwards：设置对象状态为动画开始时的状态
　　　　　　　　　　　　　　both：设置对象状态为动画结束或开始的状态

 

 

一个柱状图动画例子：2016-3-28

<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。

 

 

Trans动画： 　　2016-3-23

<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>

 

一个旋转的圆环图片：（中兴手机网站上扒的）2016-4-20

<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>

 

 

 

DEMO：这是一个鼠标浮上去后，图标旋转变色的效果（原页面是：http://www.wyzc.com/）

<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>

 

DEMO：页面底部弹出浮层，缩放效果（其实这个应该算是js动画，但也放在这里吧。）　　2016-4-19

<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 -->

 

这是个 纯CSS3轮播，可以参考下：　　2016-6-23

<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>

 

 

 

...