标签：
transition和animation都是CSS3新增的特性，使用时需要加内核
| 浏览器 | 内核名称 |
| W3C | |
| IE | -ms- |
| Chrome/Safari | -webkit- |
| Firefoc | -moz- |
| opera | -o- |
区别：
transition是过度属性，需要用户自行触发，触发时间比如：点击，鼠标悬浮等
animation是动画属性，其不需要用户触发，网页加载完成后自动执行
使用：
transation{过度属性 过度时间 动画类型 延迟时间}
-o-transation{过度属性 过度时间 动画类型 延迟时间}
-ms-transation{过度属性 过度时间 动画类型 延迟时间}
-moz-transation{过度属性 过度时间 动画类型 延迟时间}
-webkit-transation{过度属性 过度时间 动画类型 延迟时间}
@keyframes 动画名称{
0%{css属性列表}
......
100%{css属性列表}
}
@-o-keyframes 动画名称{
0%{css属性列表}
......
100%{css属性列表}
}
@-ms-keyframes 动画名称{
0%{css属性列表}
......
100%{css属性列表}
}
@-moz-keyframes 动画名称{
0%{css属性列表}
......
100%{css属性列表}
}
@-webkit-keyframes 动画名称{
0%{css属性列表}
......
100%{css属性列表}
}
div{
animation: 动画名称 持续时间 动画类型 延迟时间 循环次数 循环中是否反向 动画结束时的状态;
-o-animation: 动画名称 持续时间 动画类型 延迟时间 循环次数 循环中是否反向 动画结束时的状态;
-ms-animation: 动画名称 持续时间 动画类型 延迟时间 循环次数 循环中是否反向 动画结束时的状态;
-moz-animation: 动画名称 持续时间 动画类型 延迟时间 循环次数 循环中是否反向 动画结束时的状态;
-webkit-animation: 动画名称 持续时间 动画类型 延迟时间 循环次数 循环中是否反向 动画结束时的状态;
}
CSS3动画 transition和animation的用法和区别
标签：
原文地址：http://www.cnblogs.com/caoruiy/p/4603934.html
