css3动画

标签：工程   from   关键词   等价   快速   name   images   href   开始   

最近写网页时才发现原来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：W3school里给了这样一个例子:http://www.w3school.com.cn/tiy/t.asp?f=css3_keyframes4,但是这样一个例子仅仅教会怎么用，但如何才能用它做出好看的效果呐？接下来介绍一些动画库，这些动画库做了许多好看的动画，并且大多都有源码，看这些动画库的目的主要还是学习人家怎么做的！不可完全套用

3.1animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库。包含了60多款不同类型的CSS3动画，包括：晃动，闪动，各种淡出淡出效果，如果你想快速的整合各种CSS3动画特效的话，使用它即可方便的实现 

查看演示：https://daneden.github.io/animate.css/                                          

github地址：https://github.com/daneden/animate.css                                      

css3动画

标签：工程   from   关键词   等价   快速   name   images   href   开始   

原文地址：http://www.cnblogs.com/nullering/p/7530871.html