浅谈CSS3动画效果【Animation】
CSS3中的动画是使元素从一种样式逐渐变化为另一种样式的效果。通过设置可以对某一元素改变任意多的样式任意多的次数。通常用百分比来规定变化发生的时间，或者用关键词 "from" 和 "to"，等同于 0% 和 100%（0% 是动画的开始，100% 是动画的完成）为了得到最佳的浏览器支持，我们在定义动画的时候应该始终定义 0% 和 100% 选择器，并且应该定义动画的名称和时长，若忽略时长（默认值是零），则动画不被允许播放。
CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation。在本文章中将对Animation的用法作一简单的阐述。
小了解：在使用Animation之前，有必要了解一下keyframes规则。keyframes就是Flash中的“关键帧”，@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
下面是关于浏览器兼容的情况 （图片来源于W3Cschool）
- 实例（一）
HTML代码部分：
<div class="box">
<div class="Animation" ></div>
</div>样式代码部分：
<style>
*{
margin: 0px;
padding: 0px;
}
@keyframes myfirst {
from {
background: blanchedalmond;
}
to {
background: violet;
}
}
.Animation {
height: 60px;
width: 60px;
animation: myfirst 5s;
}
.box{
border: 2px #FF69B4 solid;
height: 360px;
width: 360px;
margin: auto;
margin-top: 60px;
}
</style>演示效果：（如图所示，小正方形的颜色发生了变化）
解释说明：
- 实例（二）
小了解：在动画中，若表示元素的动画变换状态，“0%”与“100%”一定要加上“%”，如果没有加上的话，设置的keyframes是无效的，不起任何作用。因为keyframes的单位只接受百分比值。CSS Animation动画效果将会影响元素相对应的css值，在整个动画过程中，元素的变化属性值完全是由animation来控制，动画后面的会覆盖前面的属性值。
HTML代码部分：
<div class="box">
<div class="Animation"></div>
</div>样式代码部分：
<style>
* {
margin: 0px;
padding: 0px;
}
@-webkit-keyframes myfirst {
0% {
background: red;
left: 0px;
top: 0px;
}
25% {
background: yellow;
left: 200px;
top: 0px;
}
50% {
background: blue;
left: 200px;
top: 200px;
}
75% {
background: green;
left: 0px;
top: 200px;
}
100% {
background: red;
left: 0px;
top: 0px;
}
}
.Animation {
position: absolute;
border-radius:50% ;
height: 60px;
width: 60px;
animation: myfirst 5s;
}
.box {
position: relative;
border: 2px #FF69B4 solid;
background-color: antiquewhite;
height: 360px;
width: 360px;
margin: auto;
margin-top: 60px;
}
</style>演示效果：
解释说明（图片来源于W3Cschool）：
- animation-name 用来定义一个动画的名称，其主要有两个值—>自定义动画名、none；
- animation-duration 是用来设定元素播放动画所持续的时间长，取值为【time】数值；
- animation-timing-function 指元素根据时间的推进来改变属性值的变换速率，是动画的播放方式；主要取值方式如图所示
- animation-delay 用来明确元素动画开始时间，取值为 【time】为数值；
- animation-iteration-count 用来表示动画播放循环的次数，取值为【number】数字，infinite为无限次数循环；
- animation-direction 用来指定元素动画播放的方向；
- animation-play-state 用来控制元素动画的播放状态；
部分内容来源于网站：
http://www.w3cplus.com/content/css3-animation
元气少女，加油！