<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS3.0平滑变动</title> <style type="text/css"> li { float:left; border:1px #FFFFFF solid; text-align:center; } li a { -moz-transition: all 1s ease 0s;/*根据hover进行变化*/ color:#FFFFFF; float:left; text-shadow:#FFFF00 0 -1px 2px; width:150px; background:#000000; height:150px; line-height:150px; text-decoration:none; } li a:hover { color:#000000; background:#FFFFFF; font-size:36px; text-shadow:0 -1px 2px #737373; } ul { list-style-type:none; margin:0px; padding:0 0 0 5px; } </style> </head> <body> <ul> <li><a href="#">A</a></li> <li><a href="#">B</a></li> <li><a href="#">C</a></li> <li><a href="#">D</a></li> </ul> </body> </html>
Transition对应的CSS属性列表:
transition-property
* 指定当元素哪个属性改变时执行Transition效果,属性可以时以下属性:none、all以及其他可以触发浏览器reflow或repaint的属性。
* 当指定为none时,动画立即停止,当指定为all的时候,则当元素产生任何属性值变化时都将执行“转换”效果,比如大小改变。
* 初始默认值为all.
transition-duration
* 指定“转换”过程的时间,如:1s、none。
* 初始默认值为0.
transition-timing-function
* 指定“转换”过程中可用的效果,预设的有:ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2),默认值时easy。
* cubic-bezier为通过贝塞尔曲线来计算“转换”过程中的属性值,如下曲线所示,通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。* 初始默认值为default.
transition-delay
* 指定一个动画开始执行的时间,即当改变元素属性值后多长时间开始执行“转换效果”
* 初始默认值为0.
暂无评论