在本教程中我会向你介绍CSS动画；随着浏览器支持性的提高已经变得越来越流行了，css动画在做一些事情上有很高的性能。在涵盖了基础知识后，我们将建一个快速的例子：矩形变成圆形的动画。
演示看这里
@keyframes和动画 介绍
css动画的主要组件：@keyframes，创建动画的css规则。把@keyframes想象为动画步骤的时间轴。在@keyframes里，你可以定义这些步骤，每个都有不同的样式声明。
第二步，让css动画能运行，需要为@keyframes绑定一个选择符。基于这些步骤，@keyframes声明的所有代码都会变解析然后对新的样式进行初始化。
The @keyframes
这里我们将会设置动画的步骤，@keyframes的属性如下：
选择符的名字（这个例子中是tutsFade） . 步骤：0%-100%; from (equal to 0%) and to (equal to 100%). CSS 样式: 每个阶段要应用到的样式.例子：
@keyframes tutsFade {
0% {
opacity: 1 ;
}
100% {
opacity: 0 ;
}
}
或者：
@keyframes tutsFade {
from {
opacity: 1 ;
}
to {
opacity: 0 ;
}
}
简写：
@keyframes tutsFade {
to {
opacity: 0 ;
}
}
上面的代码为元素应用一个不透明度的过渡，从opacity: 1到opacity: 0.上面三种方法实现的效果是一样的。
The Animation
animation的属性：
animation-name: @keyframes名称 (此例为 tutsFade). animation-duration:时间间隔，动画从开始到结束的总长. animation-timing-function: 设置动画速度 ( linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier ). animation-delay:动画开始前的延迟. animation-iteration-count: 在动画期间它会遍历多少次. animation-direction: 改变循环的方向，从开始到结束，还是从结束到开始，或者两者都. animation-fill-mode: 指定动画结束时元素应用的样式 ( none | forwards | backwards | both ).例如：
.element {
animation-name: tutsFade;
animation-duration: 4 s;
animation-delay: 1 s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation- direction : alternate;
}
简写为：
.element {
animation: tutsFade 4 s 1 s infinite linear alternate;
}
上面的代码会创建一个闪烁效果，1秒的动画延迟，4秒的动画间隔，交替的方向和无限线性循环迭代.
增加浏览器前缀：
在工作中，我们需要使用浏览器指定前缀确保最好的浏览器支持。标准前缀应用：
Chrome & Safari: -webkit- Firefox: -moz- Opera: -o- Internet Explorer: -ms-动画属性使用了浏览器前缀的形式：
.element {
-webkit-animation: tutsFade 4 s 1 s infinite linear alternate;
-moz-animation: tutsFade 4 s 1 s infinite linear alternate;
-ms-animation: tutsFade 4 s 1 s infinite linear alternate;
-o-animation: tutsFade 4 s 1 s infinite linear alternate;
animation: tutsFade 4 s 1 s infinite linear alternate;
}
@keyframes的前缀使用：
@-webkit-keyframes tutsFade { /* your style */ }
@-moz-keyframes tutsFade { /* your style */ }
@-ms-keyframes tutsFade { /* your style */ }
@-o-keyframes tutsFade { /* your style */ }
@keyframes tutsFade { /* your style */ }
更多浏览器前缀： http://css3please.com/
多动画
使用逗号分割添加多动画。为tutsFade 元素添加回转，我们要声明一个额外的@keyframes然后绑定到元素上：
.element {
animation: tutsFade 4 s 1 s infinite linear alternate, tutsRotate 4 s 1 s infinite linear alternate;
}
@keyframes tutsFade {
to {
opacity: 0 ;
}
}
@keyframes tutsRotate {
to {
transform: rotate( 180 deg);
}
}
------------------------------------分割线--------------------------------------------------------------------
矩形变圆形实例
这个例子中总共有五个步骤，每个步骤将为元素定义一个圆角，一个回转和不同的背景色，下面是实现的步骤和代码。
基本元素
首先创建一个标记，动画的元素。甚至不用class，仅仅只用一个div:
查看更多关于cssAnimation初体验_html/css_WEB-ITnose的详细内容...