最近写网页时才发现原来css3的动画效果感觉还不错哦！但自己以前学的时候却没有当作重点，现在从新学习一下：
1：原理：
创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，您能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间
2：@keyframes规则:
@keyframes animationname {/*animationname为动画的名称*/
keyframes-selector {/*keyftames-selector为动画时长百分比，值为从0~100%*/
css-styles;
}
}
但是目前浏览器都不支持 @keyframes 规则。Firefox 支持替代的 @-moz-keyframes 规则。Opera 支持替代的 @-o-keyframes 规则。Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。
3：使用animate将动画与元素绑定：
css的animate的具体操作参考文档 http://www.w3school.com.cn/cssref/pr_animation.asp
1 div 2 { 3 animation:mymove 5s infinite;/*infinite表示重复无限次*/ 4 -webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */ 5 }
4：W3school里给了这样一个例子:http://www.w3school.com.cn/tiy/t.asp?f=css3_keyframes4,但是这样一个例子仅仅教会怎么用，但如何才能用它做出好看的效果呐？接下来介绍一些动画库，这些动画库做了许多好看的动画，并且大多都有源码，看这些动画库的目的主要还是学习人家怎么做的！不可完全套用
4.1animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库。包含了60多款不同类型的CSS3动画，包括：晃动，闪动，各种淡出淡出效果，如果你想快速的整合各种CSS3动画特效的话，使用它即可方便的实现
查看演示：https://daneden.github.io/animate.css/
github地址：https://github.com/daneden/animate.css
使用时直接将animate.css引入，然后元素类名设为animate + 动画名称即可，或用JQuery为元素添加类名
4.2magic.css
查看演示：
http://www.17sucai.com/pins/demoshow/10001
github地址：
https://github.com/miniMAC/magic
使用时直接将magic.css引入，然后元素类名设为magictime + 动画名称即可，或用JQuery为元素添加类名
4.3Effeckt.css
查看演示：
http://www.gbtags.com/gb/linkviewer/3147.htm
4.4.hover.css
查看演示：
http://ianlunn.github.io/Hover/
github地址：
https://github.com/IanLunn/Hover
4.辨析transform
transform的含义是：改变，使变形，转换，
属性有：rotate()（旋转） / skew()（倾斜） / scale()（比例） / translate()（位移）并且还有x，y轴之分
区别在于动画可以循环，而transform只执行一次
5 ：javascript操作动画：
可以通过动画使样式以一定的速率逐渐变化。如果要实现移动的动画效果，则可以对被设定为position：absolute的元素的left属性进行渐变。如果要实现淡入淡出的效果，则可以逐渐改变元素的透明度opacity的值。
为了使样式可以以一定的速率逐渐变化，自然就需要让javascript定期执行，set Interval能够定期执行javascript函数，css3也可，推荐css3实现
1 1 <div id = "foo" style = "position:absolute">This is a sample.</div> 2 2 <script> 3 3 var elem = document.getElementById('foo'); 4 4 var frame = 0; 5 5 setInterval(function(){ 6 6 frame+=1; 7 7 elem.style.left = frame*10+'px'; 8 8 },100);//每经过100毫秒将向右移动10px 9 9 </script>
６：ＪＱｕｅｒｙ辅助操作动画
ＪＱｕｅｒｙ不仅提供了一些更改样式的简单方法，还准备了不少能够在执行动画的同时更改样式的方法。这些方法常常能够接受以下参数：ｄｕｒａｔｉｏｎ（动画持续时间），ｅａｓｉｎｇ（动画加速度），以及动画结束时的处理方式（ｃａｌｌｂａｃｋ）
| 方法 | 说明 | 方法 | 说明 |
| hide | 隐藏元素 | show | 显示元素 |
| toggle | 切换元素的隐藏状态 | fadeln | 对元素执行淡入效果 |
| fadeOut | 对元素执行淡出效果 | fadeToggle | 如果元素被隐藏则淡入，否则淡出 |
| fadeTo | 将元素不透明度渐变为opacity参数 | slideDown | 向下滑动元素 |
| slideUp | 向上滑动元素 | slideToggle | 如果元素被隐藏则向下滑动，否则向上滑动 |
| animate | 将元素的css变为props的状态 | stop | 停止动画 |
| queue | 取得队列 | dequeue | 去除队列中的第一个元素并执行 |
| delay | 以duration为时间暂停队列的处理 |
7：JQuery之animate（）方法自定义动画
7.1 语法
1 $(selector).animate({params},speed,callback); 2 /*必需的 params 参数定义形成动画的 CSS 属性。*/ 3 /*可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。*/ 4 /*可选的 callback 参数是动画完成后所执行的函数名称。*/
7.2 实例:
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("div").animate({ height:'toggle' }); }); }); </script> </head> <body> <button>开始动画</button> <p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：</p> <div style="background:#98bf21;height:100px;100px;position:absolute;"> </div> </body> </html>
7.3 animate的用法很多，并且默认地，jQuery 提供针对动画的队列功能
7.4 停止动画stop（） 关闭动画 JQuer.fx.off属性值设为false