欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

CSS3与动画有关的属性transition、animation、transform对比(史上最全版)

程序员文章站 2024-02-08 19:50:58
这篇文章主要介绍了CSS3与动画有关的属性transition、animation、transform对比,通过浏览器兼容性,用法和对比更深刻的展示了彼此之间的异同,具体操作步骤大家可查看下文的详细讲解... 17-08-18...

最近应公司需求,需要用css3做动画,终于把以前一直傻傻分不清楚的三个属性理解了。

索性在这里进行一个简单的对比,加深自己的记忆。

浏览器兼容性

css3 transform 属性

internet explorer 10、firefox、opera 支持 transform 属性。

internet explorer 9 支持替代的 -ms-transform 属性(仅适用于 2d 转换)。

safari 和 chrome 支持替代的 -webkit-transform 属性(3d 和 2d 转换)。

opera 只支持 2d 转换。

transform:rotate(7deg);
-ms-transform:rotate(7deg);     /* ie 9 */
-moz-transform:rotate(7deg);     /* firefox */
-webkit-transform:rotate(7deg); /* safari 和 chrome */
-o-transform:rotate(7deg);     /* opera */

css3 animation 属性 

internet explorer 10、firefox 以及 opera 支持 animation 属性。

safari 和 chrome 支持替代的 -webkit-animation 属性。

注释:internet explorer 9 以及更早的版本不支持 animation 属性。

用法:

animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* safari 和 chrome */

css3 transition 属性

internet explorer 10、firefox、opera 和 chrome 支持 transition 属性。

safari 支持替代的 -webkit-transition 属性。

注释:internet explorer 9 以及更早版本的浏览器不支持 transition 属性。

用法:

transition: width 2s;
-moz-transition: width 2s; /* firefox 4 */
-webkit-transition: width 2s; /* safari 和 chrome */
-o-transition: width 2s;

其他对比

transition和animation属于动画属性,transform属于静态属性。
根据英文单词的理解:转换,变换,transform主要指位移、大小、位置、形状的转换,直接写该属性变换,得到的就是变换后的形状和位置。
transition和animation因为都属于动画属性,所以都具有以下
property
duration
timing-function
delay

属性、动画时间、动画形式、延迟时间对于animation,property变成了动画的名称animation独有的属性有:

animation-iteration-count
animation-direction
 一个要定义动画播放的次数,一个为定义动画是否轮流反向播放

简写形式对比:

transition属性:过渡,即css变化的过程的过渡,所以定义transition属性的意义为,当定义过transition的属性,发生了变化,都会按照这个过渡的动画进行转变,而不是生硬的直接转变,这样就为动画提供了很好的方式。一般我们写:
-webkit-transition:all 0.85s ease-in 0.1s;
-o-transition:all 0.85s ease-in 0.1s;
-moz-transition:all 0.85s ease-in 0.1s;
transition:all 0.85s ease-in 0.1s;
all代表这所有属性的变化都会按照这个过渡进行变化
animation写法:
-webkit-animation: tang1 0.5s ease 0s infinite alternate;
animation: tang1 0.5s ease 0s infinite alternate;
简写形式,animation后面多了动画次数和是否轮流反向播放

animation开头的为动画名称,所以这里我们要先定义动画如何变换:

@keyframes tang1
{
from {left:0px;}
to {left:200px;}
}

@-webkit-keyframes tang1 /*safari and chrome*/
{
from {left:0px;}
to {left:200px;}
}

因为浏览器兼容性,这里定义动画时也要写到。
from代表0%的时候,to 代表100%的时候。

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流,谢谢大家对的支持!