CSS3过渡transition
SS3的transition属性详解:
本章节介绍一下transition属性的用法,它也是与动画相关的一个属性。
一.基本知识:
transition翻译成汉语具有"过渡"的意思,也就是说可以让一个元素的css属性值在一定时间段内进行平滑的过渡。
此属性和border、background等属性一样是复合属性。
语法结构:
transition:[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]
参数解释:
1.transition-property:设置或者检索参与过渡的属性。
2.transition-duration: 检索或设置对象过渡的持续时间。
3.transition-timing-function:检索或设置对象中过渡的动画类型。
4.transition-delay:检索或设置对象延迟过渡的时间。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.php.cn/" /> <title>php中文网</title> <style> #thediv{ width:100px; height:100px; background:blue; transition:width 2s; -moz-transition:width 2s; -webkit-transition:width 2s; -o-transition:width 2s; } #thediv:hover{ width:500px; } </style> </head> <body> <div id="thediv"></div> </body> </html>
以上代码演示如何在两秒内将div的宽度以动画的效果从100px设置为500px。
既然是复合属性,那么自然就可以将属性分开分别设置