CSS3之transition过渡
transition设置变换属性的过渡效果。
transition-property
指定参与过渡的属性。
参数：
- none：默认值
- all：监测所有变换属性的属性。
transition-duration
设置过渡的需要时间
参数：
示例：
<html>
<div class="demo"></div>
</html>
<style>
.demo{
width: 100px;
height: 100px;
background-color: #fd79a8;
transition-property: all;
transition-duration: 1s;
}
.demo:hover{
background-color: #fdcb6e;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
transition-timing-function
设置过渡动画的类型，举个例子： 匀速动画， 加速动画。
参数：
linear：匀速过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) (默认值)
ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
cubic-bezier：特定的贝塞尔曲线类型。
step-start：等同于 steps(1, start)，动画分成10步，动画执行时为开始左侧端点的部分为开始。
step-end：等同于steps(1, end)，动画执行时以结尾端点为开始，默认值为 end。
steps(n, start|end)：设置间隔参数，可以实现分步过渡
- 第一个参数指定了时间函数中的间隔数量（必须是正整数）
- 第二个参数可选，接受
start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。
示例：
linear
<html>
<div class="demo1"></div>
</html>
<style>
.demo1{
width: 50px;
height: 50px;
border: 1px solid orange;
transition-property: all;
transition-duration: 1s;
transition-timing-function: linear;
}
.demo1:hover{
width:300px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
ease
<html>
<div class="demo2"></div>
</html>
<style>
.demo2{
width: 50px;
height: 50px;
border: 1px solid orange;
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
}
.demo2:hover{
width:300px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
steps()
<html>
<div class="demo3"></div>
</html>
<style>
.demo3{
width: 50px;
height: 50px;
border: 1px solid orange;
transition-property: all;
transition-duration: 1s;
transition-timing-function: steps(10);
}
.demo3:hover{
width:300px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
transition-delay
设置延迟多少秒后开始动画效果。
示例：
鼠标放在box上1s后开始执行动画效果。
<html>
<div class="demo4"></div>
</html>
<style>
.demo4{
width: 50px;
height: 50px;
border: 1px solid #e84393;
transition-property: all;
transition-duration: 1s;
transition-delay: 1s;
}
.demo4:hover{
border-radius: 50%;
background-color: #e84393;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
transition
上面几个属性的简写：
- 第一个值为：property
- 第二个值为：duration
- 第三个值为：timing-function
- 第四个值为：delay
示例：
transition: width 1s linear 1s
贝塞尔曲线 cubic-bezier(x1,y1,x2,y2)
通过调整贝塞尔曲线可以设置出多种动画效果，比如反弹效果等
X轴的范围是0~1，Y轴的取值没有规定，但是也不宜过大。
如：直线linear，即cubic-bezier(0,0,1,1)。
贝塞尔曲线在线工具：https://cubic-bezier.com/#.17,.67,.83,.67 (opens new window)
参考：https://www.w3school.com.cn/css3/index.asp (opens new window)
CSS3之transition过渡