1 前言
CSS过渡(transition)可以在一个元素切换到另一种状态时为其定义平滑的过渡效果。
例如，用户鼠标悬停在按钮上时，按钮颜色平滑的从一个颜色过渡到另一个颜色。
.btn:hover{
background-color: red;
color: black;
}
默认悬停效果
添加过渡效果
.btn{
transition-duration: 0.8s;
transition-timing-function: ease;
}
transition是transition-property、transition-duration、transition-timing-function、transition-delay的简写属性。
下面来一一介绍这些属性。
2 transition-property
这个属性指定应用过渡效果的属性名。
它有以下取值：
all：默认值，表示过渡效果应用到所有可过渡的属性上。none：没有过渡动画。<property-name>：指定应用过渡效果的属性名，你可以指定多个值，使用逗号分隔。initial：重置为初始值。unet：重置为默认值。
3 transition-duration
过渡周期，过渡效果的持续时间。
默认值为0s，即没有过渡效果。
属性值以秒或毫秒为单位，像transition-property一样，你也可以设置多个值，它们会自动对应transition-property指定的属性名。
如果时间周期数小于过渡属性数，那么周期数会重复应用；如果时间周期数大于过渡属性数，那么时间周期数多余的部分被忽略。
4 transition-timing-function
过渡效果的时间函数，决定了动画变化速度。
下面是它的属性值介绍。
1）ease
默认值。
过渡在开始时速度较慢，中间时加速，结束时减速。
2）ease-in
过渡开始时速度较慢，然后逐渐加速。
3）ease-out
开始时速度较快，然后逐渐减速。
4）ease-in-out
过渡开始和结束时速度较慢，中间时速度较快。相比于ease更加平滑。
5）linear
过渡速度恒定，没有加速或减速，呈线性变化。
6）step-start
在过渡的开始时立即跳到结束状态。
7）step-end
在过渡的结束时立即跳回开始状态。
8）steps函数
例如steps(4,jump-end)表示将过渡划分为4步，每一步结束时立即跳到结束状态。
第二个参数有以下值：
jump-start：在每一步开始时立即跳到结束状态。jump-end：在每一步结束时立即跳到结束状态。jump-none：没有跳跃，过渡效果平滑进行。jump-both：在每一步的开始和结束时都立即跳到结束状态。
9）cubic-bezier函数
接受四个参数，分别定义了时间曲线上的两个控制点。
这四个参数的取值范围是从0到1之间。
这四个参数的组合决定了贝塞尔曲线的形状，从而影响了过渡效果的速度和变化。
你可以使用在线的贝塞尔曲线生成器来可视化和调整这些参数。
5 transition-delay
过渡之前需要等待的时间。
6 移动小球Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>移动小球Demo</title>
<style>
body {
margin: 0;
padding: 0;
}
.ball{
position: absolute;
width: 50px;
height: 50px;
border-radius: 50px;
background-color: red;
transition:all 7s ease;
}
.move {
transform: translateX(300px); /* 将小球向右移动 */
}
</style>
</head>
<body>
<button id="animateButton">移动</button>
<div class="ball"></div>
<script>
const animateButton = document.getElementById("animateButton");
const ball = document.querySelector(".ball");
animateButton.addEventListener("click", () => {
ball.classList.toggle("move");
});
</script>
</body>
</html>
