第十一讲_css过渡
css过渡
- 1. 过渡介绍
- 2. 过渡属性
- 2.1 transition-property
- 2.2 transition-duration
- 2.3 transition-delay
- 2.4 transition-timing-function
1. 过渡介绍
上一篇博客中介绍的转换（transform），从一种样式直接变成另一种样式，没有中间的过程。过渡（transition）则是让元素从一种样式平滑过渡到另一种样式。
2. 过渡属性
2.1 transition-property
定义哪些属性需要过渡。支持的取值：
- none：不过渡任何属性
- all：支持过渡的所有属性（默认值）
- 指定具体属性名（值为数字或可以转换为数字的属性才支持过渡）
2.2 transition-duration
设置过渡的持续时间，单位为秒（s）或毫秒（ms）。
2.3 transition-delay
设置过渡的延迟时间，单位为秒（s）或毫秒（ms）。
2.4 transition-timing-function
设置过渡的类型，支持的取值：
- linear：以匀速进行过渡
- ease：以慢速开始，然后变快，然后慢速进行过渡
- ease-in：以慢速开始进行过渡
- ease-out：以慢速结束进行过渡
- ease-in-out：以慢速开始和结束进行过渡
- cubic-bezier(n,n,n,n) ：用贝塞尔曲线表示速度的变化进行过渡
<html><style>.container {width: 1000px;height: 600px;border: 1px black solid;}.container:hover .child{width: 1000px;transition-property: all;transition-duration: 5s;transition-delay: 1s;}.child {height: 100px;width: 100px;}.container1 {background-color: red;transition-timing-function: linear;}.container2 {background-color: green;transition-timing-function: ease;}.container3 {background-color: blue;transition-timing-function: ease-in;}.container4 {background-color: gold;transition-timing-function: ease-out;}.container5 {background-color: gray;transition-timing-function: ease-in-out;}.container6 {background-color: aqua;transition-timing-function: cubic-bezier(.6,.66,.8,.88);}</style><div class="container"><div class="container1 child"></div><div class="container2 child"></div><div class="container3 child"></div><div class="container4 child"></div><div class="container5 child"></div><div class="container6 child"></div></div></html>
ps：运行上述代码，将鼠标移到黑色框内，观察不同的过渡类型之间的差异。。
贝塞尔曲线可以通过工具调节：贝塞尔曲线工具