在CSS3中也新增了一些能够对元素创建动画处理的属性。通过这些新增的属性，我们可以实现元素从一种样式变换成另一种样式时为元素添加动态效果，我们就可以取代网页中的动态图片、flash动画和JavaScript了。
CSS3中新增的动画效果的属性以及主流浏览器支持情况
| 属性 | 浏览器支持 | ||||
|---|---|---|---|---|---|
| transition | IE | Firefox | Chrome | Safari(-webkit-) | Opera |
| @keyframes | IE | Firefox | Chrome(-webkit-) | Safari(-webkit-) | Opera |
| animation | IE | Firefox | Chrome(-webkit-) | Safari(-webkit-) | Opera |
注：
- IE9以及更早版本不支持这三个新增属性。
- 在Safari浏览器中，需要加(-webkit-)前缀。
- 在Chrome浏览器中，@keyframes和animation属性需要加(-webkit-)前缀。
transition属性
| 属性 | 描述 | 默认值 |
|---|---|---|
| transition | 简写，用于在一个属性中设置四个过渡属性。 | 无 |
| transition-property | 定义过渡效果的 CSS 属性的名称。 | 无 |
| transition-duration | 定义过渡效果所用时间。 | 0 |
| transition-timing-function | 定义过渡效果的时间曲线。 | ease |
| transition-delay | 定义过渡效果开始时间。 | 0 |
下面是一个简单的CSS样式
img { width: 90px; height: 90px; transition-property: width, height, transform; transition-duration: 1s, 1s, 1s; transition-timing-function: ease-in-out, ease-in, ease-out; transition-delay: 1s, 1s, 0s; } img:hover{ width: 200px; height: 200px; transform: rotate(90deg); }
实现效果是当鼠标悬浮在元素(img)上时，他的宽度、高度和方向会发生变化，过渡时间都为1s，过渡方式分别为ease-in-out, ease-in和ease-out，旋转效果会立刻执行，而高宽操作会在1s后变化。
当鼠标移出元素所在范围时，它会逐渐变回原来的样式。
我们也可以transition简写来完成定义上面的样式：
img { width: 90px; height: 90px; transition:width 1s ease-in-out 1s, height 1s ease-in 1s, transform 1s ease-out 0s; ; } img:hover{ width: 200px; height: 200px; transform: rotate(90deg); }
我们还可以通过@keyframes规定来创建动画规则，通常用在较为复杂而又无需用到False动画和JavaScript的地方。
例如下面一个简单的动画效果
动画效果
部分CSS样式代码为：
#my_animate { width: 60px; height: 60px; background: #060; color: #fff; position: relative; font: bold 12px '微软雅黑'; padding: 20px 10px 0px 10px; animation: my_animate 5s infinite; } @keyframes my_animate { 0% {transform: rotate(0deg);left:0px;} 25% {transform: rotate(90deg);left:0px;} 50% {transform: rotate(0deg);left:400px;} 55% {transform: rotate(0deg);left:400px;} 70% {transform: rotate(-30deg);left:400px;background:#ff9;color:#000;} 100% {transform: rotate(-360deg);left:0px;} }
使用@keyframes创建动画时，需要绑定一个选择器。创建动画时至少要定义动画的名称和动画的时长，这样即可将@keyframes创建动画绑定到相应的选择器上。
若在创建动画时没有定义时长，那么就会取默认值0，就不会执行动画效果。
animation属性以及说明
| 属性 | 描述 | 说明 |
|---|---|---|
| @keyframes | 创建动画规则 | |
| animation | 定义动画简写属性 | 除了 animation-play-state 属性 |
| animation-name | 定义 @keyframes 动画的名称 | |
| animation-duration | 定义动画完成一个周期所花费时间(秒或者毫秒) | 默认值：0 |
| animation-timing-function | 定义动画的速度曲线 | 默认值 ：ease |
| animation-delay | 定义动画何时开始 | 默认值 ：0 |
| animation-iteration-count | 定义动画被播放的次数 | 默认值 ：1 |
| animation-direction | 定义动画是否在下一周期逆向地播放 | 默认值 ：normal |
| animation-play-state | 定义动画是否正在运行或暂停 | 默认值 ：running |
| animation-fill-mode | 定义对象动画时间之外的状态 |
上面的定义的动画效果是一个周期5s，并且进行无限次的循环播放。在@keyframes中规定了动画的6各阶段的样式，最终形成一个简单的动画效果。