transition在css中的用法
Transition在CSS中的用法
简介：
Transition是CSS3中的一个属性，用于设置元素在不同状态之间的过渡效果。通过定义过渡的属性、持续时间、延迟时间和过渡函数等参数，可以实现元素在改变样式时平滑地过渡。
基本语法：
transition: property duration timing-function delay;
参数解析：
1. property：指定要过渡的CSS属性，可以是单个属性或多个属性组合。多个属性之间以逗号分隔。
2. duration：指定过渡效果持续的时间，单位可以是秒（s）或毫秒（ms）。
3. timing-function：指定过渡效果的速度曲线。常见的取值有linear（匀速）、ease（慢快慢）、ease-in（慢入）、ease-out（慢出）等。
4. delay：指定过渡效果开始前的延迟时间，单位可以是秒（s）或毫秒（ms）。
用法示例：
1. 过渡单个属性
```
div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 1s ease-in-out;
}
div:hover {
  width: 200px;
}
```
上述代码中，当鼠标悬停在div元素上时，宽度会从100px平滑地过渡到200px，过渡持续1秒，并且速度曲线为慢快慢。
2. 过渡多个属性
```
div {
  width: 100px;
  height: 100px;
transition用法搭配  background-color: red;
  transition: width 1s ease-in-out, height 0.5s linear;
}
div:hover {
  width: 200px;
  height: 200px;
}
```
上述代码中，当鼠标悬停在div元素上时，宽度和高度会同时平滑地过渡到200px，宽度过渡持续1秒，高度过渡持续0.5秒，并且速度曲线分别为慢快慢和匀速。
3. 过渡所有属性
```
div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all 1s ease-in-out;
}
div:hover {
  width: 200px;
}
```
上述代码中，当鼠标悬停在div元素上时，所有属性（包括宽度、高度和背景颜）都会平滑地过渡到新的样式，过渡持续1秒，并且速度曲线为慢快慢。
4. 过渡延迟
```
div {
  width:100px;
  height:100px;
  background-color:red;
  transition-property:width;
  transition-duration:1s;
  transition-timing-function:ease-in-out;
  transition-delay:0.5s;
}
div:hover {
  width:200px;
}
```
上述代码中，当鼠标悬停在div元素上时，宽度会在0.5秒延迟后开始过渡到200px，过渡持续1秒，并且速度曲线为慢快慢。
5. 过渡函数
```
div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 1s cubic-bezier(0.25, -0.5, 0.75, 1.5);
}
div:hover {
  width: 200px;
}
```
上述代码中，当鼠标悬停在div元素上时，宽度会从100px平滑地过渡到200px，过渡持续1秒，并且速度曲线由自定义的贝塞尔函数控制。
6. 多重过渡
```
div {
  width:100px;
  height:100px;
  background-color:red;
  transition-property:width;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。