css3动画中transition、transform和animation的区别 |
您所在的位置:网站首页 › animator缩放调为多少最好 › css3动画中transition、transform和animation的区别 |
一、transition(过渡)
W3C中对transition的描述是:css中的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑的以动画效果改变css的属性值。 transition主要包含四个值,transition-property(执行变换的属性),transition-duration(执行变换的持续时间),transition-timing-function(变换的速率变化模式),transition-delay(变换延迟时间)。 (1)transition-property这个属性是用来指定元素中哪一个属性执行过渡效果,取值有 none 没有属性需要执行过渡 all 所有属性发生变化(默认值) indent 元素的某一个属性值 (2)transiton-duration用来指定元素转换过程的持续时间,单位为s或ms,可以作用域任何元素。默认值为0 (3)transition-timing-functiontransition-timing-function允许我们根据时间的推进去改变属性值的变换速率。主要有以下几个取值 ease(逐渐变慢) linear(匀速) ease-in(加速) ease-out(减速) ease-in-out(加速然后减速) cubic-bezier(允许自定义一个时间曲线) (4)transition-delay用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间执行transition效果。 当我们想要改变不止一个css属性而是改变多个属性的时候,只要把几个transition的声明串在一起,用逗号分隔开,然后定义各自的效果。 transition的连写:transition: property duration animation type delay 二、transform(变换)transform就是变换,改变,主要的值有以下几种 transform的所有变换都是围绕着x轴,y轴,中心点来进行变换的 transform主要包含四个值,rotate(旋转),translate(移动),scale(缩放),skew(扭曲/倾斜) (1)rotateroate:围绕中心点2D旋转若干度,单位为deg,如果deg为正数则顺时针旋转,如果是负值则逆时针旋转 (2)translatetranslate有三种情况,translate(x,y),x轴和y轴同时移动(如果这里只设定一个值,证明x的值和y的值相同,同样的也是x轴和y轴同时移动),translateX(x),沿着x轴移动,translateY(y),沿着y轴移动。 当值为负数时,反方向移动物体,其基点默认为元素 中心点 transform:translate(200px,100px) 复制代码 (3)scale缩放和移动是极其相似的,它也是具有三种情况:scale(x,y)使元素水平方向和垂直方向同时缩放(也就是x轴和y轴同时缩放);scaleX(x)就只是水平方向进行缩放(x轴缩放);scaleY(y)仅缩放垂直方向(y轴)。但它们具有相同的缩放中心点和技术,其中心点就是元素的中心位置,缩放基数就是1(也就是参数是相对于1的多少倍),如果参数大于1元素就放大,反之元素就缩小。 (4)skew扭曲在我看来就是拉动四个角,往外拉,在水平方向拉,在垂直方向拉,水平方向和垂直方向同时拉。 三、animation(动画)动画animation有两个关键 一个是animation本身的属性值,一个是keyframes的写法,keyframes比较简单,我们先来说说这个。 keyframes其实就是帧的集合,为什么这样说呢? 我们在上面看到了transition,发现它其实可以做很多动画对不对?但是有没有发现,transition它只允许在两种状态之间进行过度,没有中间的值。 而我们把一个动画看作是许多个帧的集合,我们可以去设定每个帧的呈现(每个时刻对应的css属性值),这样的动画就有更多的可变性了。 keyfram用@keyframs开头,后面接一个动画名,然后用大括号括起来,在里面写每一个关键帧的属性。 就像下面这样 @keyframes newframes { 0%{ } 100%{ } } 复制代码其中0%可以用from来代替,100%可以用to来代替,但是这两个值不能省略,也不能只写0或只写100,否则不会有任何效果。 在0%到100%之间,我们可以设置任意多个关键帧来设定css的样式,从而达到一种动画一直在变化的效果 animation-name(动画名,也就是keyfram中定义的动画名) animation-duration(动画持续时间) animation-timing-function(动画变化的速率) animation-delay(动画延迟播放的时间) animation-iteration-count(动画循环的次数,infinite是无限次) animation-direction(动画的方向) animation-play-state动画的播放状态 前5个属性值就很简单易懂了。就不再赘述,下面聊聊animation-direction和animation-play-state animation-direction这个属性是用来指定元素播放的方向,只有两个值,默认值为normal,如果是normal动画每次循环都是向前播放的,也就是每次都是从0%播放到100%。 另一个值是alternate,设定animation-direction为alternate,那么第一次播放到100%后就会从100%播放到0%,如此往返。 animation-play-state主要是用来控制元素动画的播放状态,主要有两个值running和pause,其中running是默认值,就是在播放。而paused就是暂停播放。而当动画暂停播放后,再重新设置为running的时候,就会从原来的位置重新播放。 .animation { width: 300px; height: 300px; position: absolute; font-size: 20px; color: white; background-color: pink; animation: newframes 2s ease alternate infinite; } @keyframes newframes { 0% { width: 300px; height: 300px; background-color: pink; } 50% { width: 500px; height: 500px; background-color: cyan; } 100% { width: 500px; height: 500px; background-color: yellowgreen; } } 复制代码上述就是这三者的区别,慢慢理解吧~ |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |