- transition 属性是一个简写属性，用于设置四个过渡属性：
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
- 语法：transition：要过渡的属性 .花费时间 运动曲线 何时开始；
| 要过渡的属性 | 想要变化的css属性，宽高和背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以 |
|---|
| 花费时间 | 单位是秒（必须写单位），比如0.5s |
| 运动曲线 | 默认是ease（可以省略） |
| 何时开始 | 单位是秒（必须写单位），可以设置延迟触发的时间，默认是0s（可以省略） |
运动曲线
| 值 | 描述 |
|---|
| linear | 动画从头到尾的速度是相同的，匀速 |
| ease | 默认，动画以低速开始，然后加快，在结束前变慢j |
| ease-in | 动画以低速开始 |
| ease-out | 动画以低速结束 |
| ease-in-out | 动画以低速开始和结束 |
| steps（） | 指定了时间函数中的间隔数量(步长) |
简单案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div></div>
<p>鼠标移到div</p>
</body>
<style>
div{
width: 50px;
height: 50px;
background-color: aqua;
transition: width 2s ease-out;
}
div:hover {
width: 200px;
}
</style>
</html>
1453
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
