transition
其作用是:平滑的改变CSS的值。无论是点击事件,焦点事件,还是鼠标hover,只要值改变了,就是平滑的,就是动画。
transform
transform指变换,使用过photoshop的人应该知道里面的Ctrl+T自由变换。transform就是指的这个东西,拉伸,压缩,旋转,偏移。
transform属性要是加上transition的过渡特性,可谓如虎添翼。
这里有个transform的实例:transform.html
animation
animation还是只在webkit核心的浏览器上起作用。transition只能从一组css属性变成另一组css属性。animation可以在多组属性之间变换。transition必须使用触发器触发,animation可以使用触发器,也可以在页面加载完成的时候自动触发。 Animation还可以设置播放次数。
浏览器支持
- transition
首次引入
- Safari 3.2: 13/11/2008
- Firefox 4.0: Late 2010
- Chrome 1.0: 02/09/2008
- Opera 10.5: 02/03/2010
- 2D transform
首次引入
- Safari 3.2: 13/11/2008
- Firefox 3.5: 30/06/2009
- Chrome 1.0: 02/09/2008
- Opera 10.5: 02/03/2010
- Internet Explore 9: 09/2010
- 2D animation
首次引入
- Safari 4.0: 11/06/2008
- Chrome 1.0: 02/09/2008
- 3D transform
首次引入
- Safari 4.0: 11/06/2008
- Chrome: 28/08/2010
具体详情对比请参考:transition、transform、animation