web前端-CSS3属性学习（1）-动画属性（Animation）

   对于CSS的学习，目前已通过相关书籍（例如《精通CSS-高级Web标准解决方案》、《CSS权威指南》等）和慕课网“Web前端工程师”路径完成。但以上内容缺乏系统性概括，以及对浏览器兼容性等问题的描述。现根据W3C网站“CSS 参考手册”所列举内容进行部分总结。关于各属性的具体使用方法、属性值等，参考

http://www.w3school.com.cn/cssref/index.asp

   “CSS 参考手册”第一部分为动画属性（Animation），W3C在该项中共列举10个属性：@keyframes、animation、animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-play-state、animation-fill-mode。如下：

---

- 兼容性
目前各大浏览器都支持10个属性，但存在需要加前缀的情况，具体如下：
@keyframes：
目前浏览器都不支持 @keyframes 规则。
Firefox 支持替代的 @-moz-keyframes 规则。
Opera 支持替代的 @-o-keyframes 规则。
Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。

animation、animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-play-state、animation-fill-mode：
Internet Explorer 10、Firefox 以及 Opera 支持 animation-name 属性。
Safari 和 Chrome 支持需要在属性前加前缀“-webkit-”来替代原属性使用。
注释：Internet Explorer 9 以及更早的版本不支持 animation-name 属性。

---

- 使用方法
@keyframes与animation系列属性是紧密相连的，首先利用@keyframes创建动画，然后在元素中利用animation系列属性引入动画并修改该动画的时间、速度等属性值。
实例：
首先利用@keyframes创建动画：

@-moz-keyframes mymove /* Firefox */
{
0%   {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}

@-webkit-keyframes mymove /* Safari 和 Chrome */
{
0%   {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}

@-o-keyframes mymove /* Opera */
{
0%   {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}

整个动画过程为向下移动200px,背景颜色由红色变为黄色，宽度由100px变为300px。
然后，在元素中引入动画并修改动画属性值：

div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}

定义动画时间为5s，播放次数为无限次播放。
以上即完成动画的简单创建、引入以及动画属性值修改。