CSS3的过渡属性属性名是transition,它允许我们在状态改变时为元素添加过渡效果,例如在元素从一种样式变为另一种样式时添加平滑的过渡效果。
transition的语法如下:
transition: property duration timing-function delay;
其中,
以下是一个简单的代码演示:
- <style>
- div {
- width: 100px;
- height: 100px;
- background-color: red;
- transition: width 1s linear;
- }
- div:hover {
- width: 200px;
- }
- style>
- <div>div>
在这个例子中,我们使用transition将div元素的width属性过渡到变为200像素,过渡持续1秒,时间函数为linear。当鼠标滑过div元素时,它的宽度将过渡到200像素,并且会有一个平滑的效果。