CSS中有哪些过渡方式

html-css038

CSS中有哪些过渡方式,第1张

有效的过渡属性包括:background, position, border, color,margin, padding, height, width, outline, visibility, opacity, zindex,line-height, letter-spacing, word-spacing, min/maxlength/height/width, text的一些属性等等

transition-duration:time[,time]*:指定对象过渡的持续时间

transition-timing-function是transition属性里最为复杂的一个,针对的是过渡效果的特效。

五种预留特效:

linear:线性过渡。等同于贝塞尔曲线(0,0,1.0,1.0)

ease:平滑过渡。等同于贝塞尔曲线(0.25,0.1,0.25,1.0)

ease-in:由慢到快。等同于贝塞尔曲线(0.42,0,1.0,1.0)

ease-out:由快到慢。等同于贝塞尔曲线(0,0,0.58,1.0)

ease-in-out:又慢到快再到慢。等同于贝塞尔曲线(0.42,0,0.58,1.0)

transition-timing-function是transition属性里最为复杂的一个,针对的是过度效果的特效。

也可以自己制定过渡特效:cubic-bezier(number,number,number,number)。特定的贝塞尔曲线类型,4个数值需在[0,1]区间内。(贝塞尔曲线,有人也翻译为贝兹曲线)

可以

Transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值,它的语法如下:

transition: property duration timing-function delay/*

property:执行过渡的属性

duration:执行过渡的持续时间

timing-function:执行过渡的速率模式

delay:延时多久执行

*/

transition-property

可取值:

none

没有属性会获得过渡效果。

all

所有属性都将获得过渡效果。

property

定义应用过渡效果的 CSS 属性名称列表,列表以逗号分隔。

div{transition-property:width-moz-transition-property: width/* Firefox 4 */-webkit-transition-property:width/* Safari 和 Chrome */-o-transition-property:width

/* Opera */}

transition-duration

参数为时间,单位为s(秒)或者ms(毫秒),默认就是0,回想一下如果只有transform属性,是不是变换啪地一下完成了。

div{transition-duration: 5s-moz-transition-duration: 5s/* Firefox 4 */-webkit-transition-duration: 5s/* Safari 和 Chrome */-o-transition-duration: 5s/* Opera */}

transition-timing-function

既然是动画,那么就有动画的运行速率,不同的速度会产生不同的结果,以下是可取值。

ease:(逐渐变慢)默认值,ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).

linear:(匀速),linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).

ease-in:(加速),ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).

ease-out:(减速),ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).

ease-in-out:(加速然后减速),ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

速率示意图

transition-delay

参数为时间,单位为s(秒)或者ms(毫秒),默认就是0,也就是立即执行,如果在多个动画直接有先后顺序,那么它就会派上用场。

把它们写在一起

浏览器内核的前缀不能忘啊,使用emmet神器来帮助你。

emmet使用如图所示:

-webkit-transition: all 0.5s ease-in-out 0s

-o-transition: all 0.5s ease-in-out 0s

transition: all 0.5s ease-in-out 0s

如图所示

将它们放在一起的效果如下,可以很明显的发现它们之间的不同。

css3动画:

可以自定义节点改变属性,例如30%,40%....这种节点式定义属性的状态值,相对过度来说,可以把一系列的属性变化按照顺序节点来执行,这就好比把动画封装成了一个“函数”,既可以共用,又可以根据改变html标签元素的class来增加或者删除动画效果,动画最好用在写复杂效果的时候用,或者有定义触发一个事件然后删除动画、增加动画时候用。我做轮换图的时候就是js触发,然后使元素拥有一个class引用,class对应的就是动画,很灵活的控制了动画的执行。

过渡效果

过渡效果顾名思义,只是一个简短的过渡,它只能定义一个状态(css属性)到另一个状态,没有节点,所以做不了太复杂的效果,但是相对效率比较高,能用过渡的就不用css3动画,当然两者都是各有优劣,没有任何一种属性是没有用的,合理才是最重要的!

谢谢采纳!