CSS3中得过渡transition是一种能与动画属性有类似效果的属性,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。
它有四种属性:
transition-property: width; ----使用过渡的css属性名称(可不写,默认为过渡全部需要过渡的css属性)
transition-duration: 1s; ----过渡效果花费的时间(必须写)
transition-timing-function: linear; ----过渡效果的时间曲线(可不写,默认为先快后慢,即ease)
transition-delay: 2s; ----过渡效果何时开始(可不写,默认为立即发生,即0)
连写时它可以有四个值:
transition:使用过渡的css属性名称,过渡效果花费的时间,过渡效果的时间曲线,过渡效果何时开始
如:
transition:width 1s linear 2s; 即:css宽度属性,花一秒时间过渡,状态为匀速,延迟两秒发生过渡
当需要不同css属性过渡不同的时间时,可以将它们分别列出。
如:
transition:width 4s,height 3s,transform 2s;