提示:过渡效果通常会在鼠标悬停在元素上时发生,如果未设置过渡持续的时间,则过渡效果不会生效,因为过渡时间的默认值为 0。
transition-property: none | all | property;
参数说明如下:,
进行分隔。<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; border: 3px solid black; margin: 10px 0px 0px 10px; transition-property: width, background; } div:hover { width: 200px; background-color: blue; } </style> </head> <body> <div></div> </body> </html>
transition-duration: time;
其中,time 为完成过渡效果需要花费的时间(单位为秒或毫秒),默认值为 0,意味着不会有效果。 transition-duration: 1s, 2s, 3s;
。除此之外,也可以使用一个时间来为所有参与过渡的属性设置过渡所需的时间。示例代码如下:<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; border: 3px solid black; margin: 10px 0px 0px 10px; transition-property: width, background; transition-duration: .25s, 1s; } div:hover { width: 200px; background-color: blue; } </style> </head> <body> <div></div> </body> </html>运行效果如下图所示:
图:transition-duration 属性演示
值 | 描述 |
---|---|
linear | 以始终相同的速度完成整个过渡过程,等同于 cubic-bezier(0,0,1,1) |
ease | 以慢速开始,然后变快,然后慢速结束的顺序来完成过渡过程,等同于 cubic-bezier(0.25,0.1,0.25,1) |
ease-in | 以慢速开始过渡的过程,等同于 cubic-bezier(0.42,0,1,1) |
ease-out | 以慢速结束过渡的过程,等同于 cubic-bezier(0,0,0.58,1) |
ease-in-out | 以慢速开始,并以慢速结束的过渡效果,等同于 cubic-bezier(0.42,0,0.58,1) |
cubic-bezier(n, n, n, n) | 使用 cubic-bezier() 函数来定义自己的值,每个参数的取值范围在 0 到 1 之间 |
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; border: 3px solid black; margin: 10px 0px 0px 10px; transition-property: width, background; transition-duration: .25s, 1s; transition-timing-function: ease; } div:hover { width: 200px; background-color: blue; } </style> </head> <body> <div></div> </body> </html>
transition-delay: time;
其中,参数 time 用来设置在过渡效果开始之前需要等待的时间,单位为秒或毫秒。<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; border: 3px solid black; margin: 10px 0px 0px 10px; transition-property: width, background; transition-duration: .25s, 1s; transition-delay: 3s; } div:hover { width: 200px; background-color: blue; } </style> </head> <body> <div></div> </body> </html>运行效果如下图所示:
图:transition-delay 属性演示
transition: transition-property transition-duration transition-timing-function transition-delay;
transition 属性中,transition-property 和 transition-duration 为必填参数,transition-timing-function 和 transition-delay 为选填参数,如非必要可以省略不写。另外,通过 transition 属性也可以设置多组过渡效果,每组之间使用逗号进行分隔,示例代码如下:<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; border: 3px solid black; margin: 10px 0px 0px 10px; transition: width .25s linear 1.9s, background 1s 2s, transform 2s; } div:hover { width: 200px; background-color: blue; transform: rotate(180deg); } </style> </head> <body> <div></div> </body> </html>运行效果如下图所示:
图:transition 属性演示
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; border: 3px solid black; margin: 10px 0px 0px 10px; transition-property: width, background, transform; transition-duration: .25s, 1s, 2s; transition-timing-function: linear, ease, ease; transition-delay: 1.9s, 2s, 0s; } div:hover { width: 200px; background-color: blue; transform: rotate(180deg); } </style> </head> <body> <div></div> </body> </html>
本文链接:http://task.lmcjl.com/news/14686.html