HTML5复习 (15)

xiaoxiao2021-02-28  157

CSS3过渡transition

允许CSS的属性值在一定的时间内平滑的过渡。

在鼠标点击,获得焦点,被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。

一、transition-property

transition-property:all | none | property

none没有属性改变

all所有属性都改变

property 具体属性名称

二、transition-duration

开始过渡到完成需要花费的时间

transition-duration:time;

time是秒或者毫秒做单位

三、transition-timing-function

动画过渡的方式,只能选用一个

transition-timing-function:ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end

linear 线性过渡  匀速。

ease 平滑过渡  逐渐变快,到达一定速度,速度增加就慢了

ease-in 由慢到快

ease-out 由快到慢

ease-in-out 又慢到快再到慢

step-start 等同于step(1,start) 先过渡,过渡完的效果等于过渡前的效果

step-end 等同于step(1,end)先过渡,过渡完的效果等于过渡后的效果

step(n,start|end) step这三个不好用

四、transition-delay

设置对象延迟过渡的事件

transition-delay:time;

默认值为0

五、transition

整合上面四个属性

transition:property duration timing-function delay

转载请注明原文地址: https://www.6miu.com/read-18666.html

最新回复(0)