一句话就有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>

...

!!学习笔记：CSS3动画的更多相关文章

  1. HTML 学习笔记 CSS3(Animation)

    CSS3动画: 通过CSS3 我们能够创建动画 这可以在许多网页中取代动画图片 Flash动画 以及JavaScript. CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 ...

  2. iOS学习笔记10-UIView动画

    上次学习了iOS学习笔记09-核心动画CoreAnimation,这次继续学习动画,上次使用的CoreAnimation很多人感觉使用起来很繁琐,有没有更加方便的动画效果实现呢?答案是有的,那就是UI ...

  3. webgl学习笔记四-动画

    写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放   下面我们将讲解下如何让一个正方形动起来~不断擦除和重绘 ...

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

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

  5. CSS3 学习笔记（动画 多媒体查询）

    动画 1.@keyframes规则用于创建动画.在@keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果 2.使用animation进行动画捆绑.两个值:动画名称.时长 ...

  6. HTML 学习笔记 CSS3(过度 transition)

    通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果.请把鼠标移动到下面的元素上: 先看一下这个代码 实现旋转放大的效 ...

  7. HTML 学习笔记 CSS3 (2D Matrix)

    Matrix 矩阵 那么什么是矩阵呢? 矩阵可以理解为方阵,只不过 平时方阵里面站着人 矩阵中是数值: CSS3中的矩阵: css3中的矩阵指的是一个方法,书写为matrix() 和 matrix3d ...

  8. [学习笔记]js动画实现方法，作用域，闭包

    一,js动画基本都是依靠setInterval和setTimeout来实现 1,setInterval是间隔执行,过一段时间执行一次代码 setInterval(function(){},500);即 ...

  9. Android学习笔记-tween动画之java实现

    Android动画分为Tween动画和Frame动画,近期学习了,体tween动画,现在讲学习的心得以及相关知识介绍如下. Tween又称为补间动画,可以把对象进行缩小.放大.旋转和渐变等操作.   ...

  10. 前端学习笔记--CSS3

    本本记录了css3的样式:浏览器支持度.圆角边框.阴影.文字与文本.过渡.动画.2d旋转.3d旋转 浏览器支持度: 1.圆角边框 例:只要确定了x.y值,就能知道弧度 画一个圆形:长=宽,border ...

随机推荐

  1. VSTO：使用C#开发Excel、Word【16】

    使用工作表对象Worksheet对象表示Excel工作簿中的工作表.Worksheet有一个Name属性,返回工作表的名称(例如“Sheet1”). 工作表管理Worksheet对象具有一个Index ...

  2. 事务理解及Spring中的事务

    一.隔离级别理解 1.脏读 首先理解,一个事务对数据进行了改变,尽管该事务尚未提交,但此时其他事务中的查询语句(注意一定是处于事务中的语句,不处于事务中的语句查到的是正常的)查到的数据,是该事务修改之 ...

  3. effective_java第23条：请不要新代码中使用原生态类型

    从这条开始涉及泛型相关的点. 从JDK5开始Java新增了“泛型”新特性,例如:List<String>,在这之前则只有List不会限定类型. 如今的JDK版本中还是可以写原生类型,但这会 ...

  4. 谷歌浏览器chrome的vuejs devtools 插件的安装

    (推荐方法2) 安装方法1: 需正常打开chrome商店,搜索vuejs devtools 安装.chrome://extensions/ 开发者工具-扩展程序下启用: 方法2: github下载插件 ...

  5. sqlserver2008数据库自动备份的sql脚本及使用bat命令执行脚本

    -----sql脚本 declare @fileName varchar(255) ,--定义备份文件名变量         @dbname varchar(255)--定义备份数据库名变量decla ...

  6. Python全栈之路----函数----高阶函数

    变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一函数作为参数,这种函数就称之为高阶函数. 只需满足以下任意一个条件,即是高阶函数: 接收一个或多个函数作为输入 def func(x, ...

  7. python学习之路05

    控制流语句 博主认为所有的语言中,控制语句都是差不多的,无非就是循环,判断,if ,while,for.更重要的是,多加的练习,实战中发现自身问题,加深巩固 所以,下面会以实际的题目为主. 1.用户在 ...

  8. html（二）常见符号

    HTML当中的常见实体内容:

  9. 利用开源项目jadx反编译Android应用

    原文转自:http://bbs.itheima.com/thread-200475-1-1.html 利用开源项目jadx反编译Android应用 利用Github开源项目jadx可以直接对 .dex ...

  10. webpack的知识内容

    webpack的构建工具: 浏览器的兼容性? 转换ES6语法: 转化JSX: css