哪些浏览器支持css3动画
| CSS属性 | IE | Firefox | Safari | Chrome | Opera |
|---|---|---|---|---|---|
| CSS 2D Transform | no | 3.5 | 3.2 | 2.0 | 10.5 |
| CSS 3D Transform | no | no | 4.* (Mac) | no | no |
| CSS Transition | no | 3.7 | 3.2 | 2.0 | 10.5 |
| CSS Animation | no | no | 4.0 | 2.0 | no |
(数据来自http://caniuse.com/)
可以看到，CSS Animation目前只有Webkit内核浏览器支持，目前只能自己玩玩；而Transition用来做渐进增强则较为合适。
一个简单的例子
需求：让一个div元素在鼠标移上去时变大1倍，旋转180度，且背景由红变蓝。
<style>
div {
position: absolute;
left: 100px;
top: 100px;
width: 100px;
height: 100px;
background: red;
/* 定义动画的过程 */
-webkit-transition: -webkit-transform .5s ease-in, background .5s ease-in;
-moz-transition: -moz-transform .5s ease-in, background .5s ease-in;
-o-transition: -o-transform .5s ease-in, background .5s ease-in;
transition: transform .5s ease-in, background .5s ease-in;
}
div:hover {
/* 定义动画的状态 */
-webkit-transform: rotate(180deg) scale(2);
-moz-transform: rotate(180deg) scale(2);
-o-transform: rotate(180deg) scale(2);
-transform: rotate(180deg) scale(2);
background: blue;
}
</style>
<div></div>
加支付宝好友偷能量挖...
