CSS `Transition` 深度：`transition-property`, `transition-timing-function` 技巧 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷，大家好！今天咱们就来唠唠 CSS transition 的那些事儿，保证让大家听完之后，感觉这玩意儿就像你家后院的猫，熟悉得不能再熟悉。

咱们今天主要聊 transition-property 和 transition-timing-function 这两个哥们儿，别看名字长，其实干的都是实在事儿。

开胃小菜：transition 的基础概念

在深入挖掘之前，咱们先简单回顾一下 transition 是个什么玩意儿。简单来说，它就是一个让你的 CSS 属性值变化过程变得平滑的工具。如果没有它，你的元素属性值变化就会“嗖”的一下，直接从A跳到B，跟瞬移似的，体验极差。有了 transition，就能让这个过程变得丝滑柔顺，看起来更舒服。

transition 属性是一个简写属性，它可以设置以下四个子属性：

transition-property: 指定要过渡的 CSS 属性。
transition-duration: 指定过渡效果持续的时间。
transition-timing-function: 指定过渡效果的速度曲线。
transition-delay: 指定过渡效果开始前的延迟时间。

今天咱们重点聊聊前两个。

主角登场：transition-property

transition-property 顾名思义，就是指定哪些 CSS 属性需要应用过渡效果。如果你不指定，或者指定为 all，那么所有可以进行过渡的属性都会应用过渡效果。

all: 所有可以进行过渡的属性都会应用过渡效果。这是默认值。
none: 没有属性会应用过渡效果。
<property>: 指定一个或多个 CSS 属性的名称，用逗号分隔。例如：width, height, background-color。

例子说话：

假设我们有一个 div，我们想让它的宽度和背景颜色在鼠标悬停时平滑过渡：

<!DOCTYPE html>
<html>
<head>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  transition-property: width, background-color;
  transition-duration: 0.5s;
}

.box:hover {
  width: 200px;
  background-color: lightcoral;
}
</style>
</head>
<body>

<div class="box">Hover me!</div>

</body>
</html>

在这个例子中，我们指定了 transition-property: width, background-color;，这意味着只有 width 和 background-color 这两个属性会应用过渡效果。 transition-duration: 0.5s; 表示过渡效果持续 0.5 秒。

如果你把 transition-property 改成 all，那么所有可过渡的属性，比如 border-radius，opacity 等，都会应用过渡效果（如果它们的值发生了变化）。

transition-property 的一些坑：

auto 不是万能的: 有些属性，比如 height: auto; 是不能直接过渡的。因为 auto 不是一个具体的值，浏览器不知道该如何过渡。你需要使用 JavaScript 来动态计算高度，然后应用过渡效果。
display: none 没法过渡: display 属性是离散的，要么显示，要么隐藏，不能平滑过渡。如果你想实现类似淡入淡出的效果，可以使用 opacity 属性。
小心性能问题: 过渡所有属性 (transition-property: all;) 可能会导致性能问题，特别是对于复杂的页面。尽量只过渡那些需要过渡的属性。

过渡哪些属性比较常见？

这里列一个表格，总结一下常见的可过渡属性：

属性	描述
`width`	元素的宽度。
`height`	元素的高度。
`margin`	元素的外边距。
`padding`	元素的内边距。
`opacity`	元素的透明度。
`background-color`	元素的背景颜色。
`color`	元素的文本颜色。
`transform`	元素的 2D 或 3D 转换（例如：`translate`, `rotate`, `scale`）。
`box-shadow`	元素的阴影。
`border-color`	元素的边框颜色。
`border-width`	元素的边框宽度。
`font-size`	元素的字体大小。

压轴大戏：transition-timing-function

transition-timing-function 决定了过渡效果的速度曲线。你可以把它想象成一个控制过渡速度的“变速器”。不同的速度曲线会产生不同的视觉效果。

linear: 匀速过渡。速度从头到尾都是一样的，就像坐火车一样。
ease: 默认值。开始慢，中间快，结束慢。就像汽车起步和刹车一样。
ease-in: 开始慢，然后加速。就像起跑加速的运动员。
ease-out: 开始快，然后减速。就像飞机降落一样。
ease-in-out: 开始慢，中间快，结束慢。和 ease 类似，但开始和结束的减速效果更明显。
cubic-bezier(n,n,n,n): 自定义的速度曲线。你可以通过调整四个参数来定义自己的速度曲线。这个比较高级，咱们后面再细说。
steps(n, [ start | end ] ): 将过渡过程分割成 n 个步骤。过渡效果会以离散的跳跃方式进行，而不是平滑过渡。 start 和 end 参数指定跳跃发生的位置。

例子说话：

<!DOCTYPE html>
<html>
<head>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin-bottom: 20px;
  transition-property: width;
  transition-duration: 1s;
}

.box:hover {
  width: 200px;
}

.linear {
  transition-timing-function: linear;
}

.ease {
  transition-timing-function: ease;
}

.ease-in {
  transition-timing-function: ease-in;
}

.ease-out {
  transition-timing-function: ease-out;
}

.ease-in-out {
  transition-timing-function: ease-in-out;
}
</style>
</head>
<body>

<div class="box linear">Linear</div>
<div class="box ease">Ease</div>
<div class="box ease-in">Ease-in</div>
<div class="box ease-out">Ease-out</div>
<div class="box ease-in-out">Ease-in-out</div>

</body>
</html>

在这个例子中，我们创建了五个 div，每个 div 都应用了不同的 transition-timing-function。当你把鼠标悬停在这些 div 上时，你会发现它们的宽度变化的速度是不一样的。

cubic-bezier 的秘密：

cubic-bezier(n,n,n,n) 允许你自定义速度曲线。它使用一个三次贝塞尔曲线来描述速度的变化。四个参数 n 代表两个控制点的坐标。这两个控制点会影响曲线的形状，从而影响过渡的速度。

n: 控制点的 x 坐标 (0 到 1 之间)。
n: 控制点的 y 坐标 (通常在 0 到 1 之间，但也可以超出这个范围，产生一些特殊效果)。

你可以使用在线工具（比如 cubic-bezier.com）来可视化地创建 cubic-bezier 曲线，然后复制生成的代码到你的 CSS 中。

例子说话：

.custom {
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* 一个弹跳效果 */
}

这个例子使用了 cubic-bezier 来创建一个弹跳效果。你可以自己尝试不同的参数，看看会产生什么效果。

steps 的妙用：

steps(n, [ start | end ] ) 将过渡过程分割成 n 个步骤。它常用于创建动画效果，比如精灵动画。

n: 步骤的数量。
start: 在每个步骤的开始时跳跃。
end: 在每个步骤的结束时跳跃。这是默认值。

例子说话：

<!DOCTYPE html>
<html>
<head>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  transition-property: width;
  transition-duration: 1s;
}

.box:hover {
  width: 200px;
}

.steps-start {
  transition-timing-function: steps(5, start);
}

.steps-end {
  transition-timing-function: steps(5, end);
}
</style>
</head>
<body>

<div class="box steps-start">Steps Start</div>
<div class="box steps-end">Steps End</div>

</body>
</html>

在这个例子中，我们创建了两个 div，一个使用了 steps(5, start)，另一个使用了 steps(5, end)。当你把鼠标悬停在这些 div 上时，你会发现它们的宽度变化是分段的，而不是平滑的。

transition-timing-function 的一些坑：

过度花哨的速度曲线: 虽然 cubic-bezier 提供了很大的灵活性，但过度花哨的速度曲线可能会让用户感到不适。尽量选择自然流畅的速度曲线。
steps 的适用场景: steps 适用于创建动画效果，但不适用于平滑过渡。

transition-property 和 transition-timing-function 的结合使用：

这两个属性通常会一起使用，来创造出各种各样的过渡效果。你可以根据你的需求，选择合适的属性和速度曲线，来达到最佳的视觉效果。

实战演练：

咱们来做一个简单的按钮动画：

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  transition-property: background-color, transform, box-shadow;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
}

.button:hover {
  background-color: #3e8e41;
  transform: translateY(-3px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>

<button class="button">Hover me!</button>

</body>
</html>

在这个例子中，我们让按钮的背景颜色、transform 和 box-shadow 在鼠标悬停时应用过渡效果。我们使用了 ease-in-out 速度曲线，让过渡效果更加平滑自然。

总结：

transition-property 和 transition-timing-function 是 CSS transition 中非常重要的两个属性。掌握它们，你就可以轻松地创建各种各样的过渡效果，让你的网页更加生动有趣。

记住，多练习，多尝试，你就能成为 transition 大师！希望今天的讲解对大家有所帮助。谢谢大家！

发表回复 取消回复

发表回复取消回复