通过:hover、:focus、:active、:checked或者JavaScript触发一个元素,并改变样式时,可以使用transition属性,让外观的变化显得更加细腻,而不是瞬间从一个外观变成另一个外观。
一、使用CSS创建简单过渡的步骤:
1)在默认样式中声明元素的初始状态样式。
2)声明过渡元素最终状态样式
,比如悬浮状态。
3)在默认样式中通过添加过渡函数,添加一些不同的样式。
二、浏览器的兼容性问题,为了最大限度的兼容各个浏览器,在使用此属性的时候,要加上各个浏览器的前缀,可以这样使用;
<span style="white-space:pre"> </span>transition: all 1s ease-in-out;
-ms-transition:all 1s ease-in-out
-moz-transition: all 1s ease-in-out; /* Firefox 4 */
-webkit-transition: all 1s ease-in-out; /* Safari 和 Chrome */
-o-transition: all 1s ease-in-out; /* Opera */
三、transition属性值(前三个属性值较常用):
1、transition-property:指定需要过渡的CSS属性,取值
1)为none时,没有指定任何样式。
2)all为默认值,表示指定所有样式。
3)指定一个属性值。
注:只有属性具有一个中点值的属性才具有过渡效果。
2、transition-duration:指定过渡的持续时间:
指定一个时间,单位为s(秒)或ms(毫秒)
3、ransition-timing-function:指定过渡函数
可以使用linear、ease等函数
4、transition-delay:指定过渡开始出现的延迟时间,值为一个带s或ms的时间值,如果不指定,则默认为零,
注意:四个值使用时用空格隔开。如上述的那个兼容性例子所示,可以同时指定多个属性,不同组之间用逗号隔开,例如:
transition:width 1s linear 2s,height 2s liner 2s
1、伪元素(:hove等)触发。
2、媒体查询触发。
3、JavaScript触发。
一般性建议:事件通常应用通过JavaScript触发,简单的动画或过渡则使用css触发