最近应公司需求,需要用css3做动画,终于把以前一直傻傻分不清楚的三个属性理解了。
索性在这里进行一个简单的对比,加深自己的记忆。
浏览器兼容性
CSS3 transform 属性
Internet Explorer 10、Firefox、Opera 支持 transform 属性。
Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。
Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。
Opera 只支持 2D 转换。
1
2
|
transform:rotate( 7 deg);
-ms-transform:rotate( 7 deg); /* IE 9 */ -moz-transform:rotate( 7 deg); /* Firefox */ -webkit-transform:rotate( 7 deg); /* Safari 和 Chrome */ -o-transform:rotate( 7 deg); /* Opera */
|
CSS3 animation 属性
Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。
Safari 和 Chrome 支持替代的 -webkit-animation 属性。
注释:Internet Explorer 9 以及更早的版本不支持 animation 属性。
用法:
1
2
|
animation:mymove 5 s infinite;
-webkit-animation:mymove 5 s infinite; /* Safari 和 Chrome */
|
CSS3 transition 属性
Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。
Safari 支持替代的 -webkit-transition 属性。
注释:Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性。
用法:
1
2
|
transition: width 2 s;
-moz-transition: width 2 s; /* Firefox 4 */ -webkit-transition: width 2 s; /* Safari 和 Chrome */ -o-transition: width 2 s;
|
其他对比
transition和animation属于动画属性,transform属于静态属性。
根据英文单词的理解:转换,变换,transform主要指位移、大小、位置、形状的转换,直接写该属性变换,得到的就是变换后的形状和位置。
transition和animation因为都属于动画属性,所以都具有以下
-
property
-
duration
-
timing-function
-
delay
属性、动画时间、动画形式、延迟时间
对于animation,property变成了动画的名称
animation独有的属性有:
-
animation-iteration-count
-
animation-direction
一个要定义动画播放的次数,一个为定义动画是否轮流反向播放
简写形式对比:
transition属性:过渡,即css变化的过程的过渡,所以定义transition属性的意义为,当定义过transition的属性,发生了变化,都会按照这个过渡的动画进行转变,而不是生硬的直接转变,这样就为动画提供了很好的方式。
一般我们写:
1
2
3
4
|
-webkit-transition: all 0.85 s ease-in 0.1 s;
-o-transition: all 0.85 s ease-in 0.1 s;
-moz-transition: all 0.85 s ease-in 0.1 s;
transition: all 0.85 s ease-in 0.1 s;
|
all代表这所有属性的变化都会按照这个过渡进行变化
animation写法:
1
2
|
-webkit-animation: tang 1 0.5 s ease 0 s infinite alternate;
animation: tang 1 0.5 s ease 0 s infinite alternate;
|
简写形式,animation后面多了动画次数和是否轮流反向播放
animation开头的为动画名称,所以这里我们要先定义动画如何变换:
1
2
3
|
@keyframes tang 1 {from { left : 0px ;}to { left : 200px ;}}
@-webkit-keyframes tang 1 /*Safari and Chrome*/ {from { left : 0px ;}to { left : 200px ;}
|
因为浏览器兼容性,这里定义动画时也要写到。
from代表0%的时候,to 代表100%的时候。
本文转自 蓓蕾心晴 51CTO博客,原文链接:http://blog.51cto.com/beileixinqing/1931752,如需转载请自行联系原作者