CSS3与动漫相关的特性transition、animation、transfor

日期:2020-10-16 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页

近期应企业要求,必须用css3做动漫,终究把之前1直傻傻分不清楚楚的3个特性了解了。

索性在这里开展1个简易的比照,加深自身的记忆力。

访问器适配性

CSS3 transform 特性

Internet Explorer 10、Firefox、Opera 适用 transform 特性。

Internet Explorer 9 适用取代的 -ms-transform 特性(仅可用于 2D 变换)。

Safari 和 Chrome 适用取代的 -webkit-transform 特性(三d 和 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
 1个要界定动漫播发的次数,1个为界定动漫是不是轮着反方向播发

简写方式比照:

transition特性:过渡,即css转变的全过程的过渡,因此界定transition特性的实际意义为,当界定过transition的特性,产生了转变,都会依照这个过渡的动漫开展变化,而并不是生涩的立即变化,这样就为动漫出示了很好的方法。1般大家写:
-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%的情况下。

以上便是这篇文章内容的所有內容了,期待本文的內容对大伙儿的学习培训或工作中能带来1定的协助~假如有疑惑大伙儿能够留言沟通交流,感谢大伙儿对脚本制作之家的适用!