大家好，我是柒八九。

前言

今天，我们来讲的轻松的话题。作为一个前端，能画出一手炫酷的动画，是一件很振奋人心的事情。并且网页动画已经成为一个庞大而复杂的工具和技术。类似GSAP、Framer Motion和React Spring等库已经涌现，以帮助我们在DOM中添加动画效果。

然而，万丈高楼平地起，最基本和关键的工具是不起眼的CSS过渡（CSS transition）。这是大多数前端开发人员学习的第一个动画工具，它是一个不可或缺的工具。

所以，我们今天就来聊聊这个。

你能所学到的知识点

1. 前置知识点
2. 牛刀小试
3. 时间函数
4. 动画优化
5. 基于动作驱动的动画
6. 过渡延迟

前置知识点

前置知识点，只是做一个概念的介绍，不会做深度解释。因为，这些概念在下面文章中会有出现，为了让行文更加的顺畅，所以将本该在文内的概念解释放到前面来。如果大家对这些概念熟悉，可以直接忽略

同时，由于阅读我文章的群体有很多，所以有些知识点可能我视之若珍宝，尔视只如草芥，弃之如敝履。以下知识点，请酌情使用。

CSS过渡基础知识

在涉及CSS过渡时，有一些基本概念和属性，我们需要了解。这些构成了在Web上创建流畅和精致动画的基础要素。

1. CSS过渡允许我们在指定的持续时间内平滑地更改属性值。

• 关键的过渡属性包括transition-property、transition-duration、transition-timing-function和transition-delay。
• 这些属性确定了要进行动画处理的内容，动画的持续时间，动画的时间函数以及动画开始之前的任何延迟。

2. transition-property：此属性定义了要将过渡效果应用于哪些CSS属性。

• 例如，我们可以过渡元素的width属性。

3. transition-duration：此属性指定过渡完成所需的时间。

• 我们可以以秒（s）或毫秒（ms）为单位设置它。

4. transition-timing-function：此属性控制动画的速度。

• 它定义了在过渡期间的加速和减速情况。
• 常见的时间函数包括ease、linear、ease-in、ease-out和ease-in-out。

5. transition-delay：我们可以使用此属性在过渡开始之前引入延迟。

• 它也可以以秒（s）或毫秒（ms）为单位指定。

6. 以下是如何在CSS中使用这些属性的示例：

/* 对width属性应用过渡效果，持续0.5秒，使用ease-in-out时间函数，延迟0.2秒 */
.element {
  transition-property: width;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
  transition-delay: 0.2s;
}

1. 触发过渡：过渡通常在元素的状态发生变化时触发。

• 例如，当我们悬停在按钮上时，可以更改其背景颜色，过渡效果将使颜色平滑地在指定的持续时间内变化。

2. 多重过渡： 我们可以通过使用逗号分隔的属性值将多个过渡应用于单个元素，从而可以同时对多个属性进行动画处理。
   

贝塞尔曲线

贝塞尔曲线是一种用于描述二维或三维曲线的数学工具，它广泛应用于计算机图形、计算机辅助设计（CAD）、动画制作以及许多其他领域。贝塞尔曲线以其平滑的形状和良好的控制性而闻名，它由一组控制点（也称为"控制顶点"或"控制节点"）定义，这些点确定了曲线的形状和特性。

贝塞尔曲线有几种类型，其中最常见的是二次贝塞尔曲线和三次贝塞尔曲线。

1. 二次贝塞尔曲线（Quadratic Bezier Curve）：

• 二次贝塞尔曲线由三个点定义：起始点（P0）、控制点（P1）、和结束点（P2）。
• 曲线从起始点出发，经过控制点，最终到达结束点。
• 控制点的位置影响了曲线的形状，控制点决定了曲线在该点的切线方向。
• 

2. 三次贝塞尔曲线（Cubic Bezier Curve）：

• 三次贝塞尔曲线由四个点定义：起始点（P0）、第一个控制点（P1）、第二个控制点（P2）、和结束点（P3）。
• 曲线从起始点出发，经过两个控制点，最终到达结束点。
• 控制点的位置和数量决定了曲线的形状和弯曲程度。
• 

贝塞尔曲线的关键特点包括：

• 平滑性：贝塞尔曲线始终保持平滑，没有锯齿或尖锐的角。
• 控制性：通过调整控制点的位置，可以精确控制曲线的形状。
• 递归性：贝塞尔曲线可以嵌套，也就是说，一个贝塞尔曲线的控制点可以是另一个贝塞尔曲线。

子像素渲染

子像素渲染（Sub-pixel rendering）是一种图形渲染技术，通常用于改善文本和图像在计算机屏幕上的呈现质量。这种技术的主要目标是在像素级别上增加渲染的精度，以获得更清晰和平滑的图像。子像素渲染特别常见于现代操作系统和Web浏览器中的文本呈现。

1. 子像素定位：

• 通常，屏幕上的每个像素都由红、绿和蓝三个子像素组成，它们的颜色可以独立控制。子像素渲染充分利用了这一特性，通过微调文本和图像的位置来实现更精确的呈现。

2. 清晰的文本：

• 子像素渲染可以使文本字符的边缘更加平滑和清晰。通过微调字符的位置，字母之间的间隙以及笔画的精确位置，文本可以呈现出更高的清晰度和可读性。

3. 抗锯齿效果：

• 子像素渲染还有助于减少锯齿（锯齿状边缘）的出现。通过将字符和图像的边缘放在子像素级别，渲染引擎可以创建更平滑的边缘，从而减少锯齿。

4. 颜色分离：

• 子像素渲染允许文本和图像中的颜色分离到每个子像素。这样，一个像素可以显示多种颜色，提供更丰富的颜色表示能力。

5. 适用范围：

• 子像素渲染对于高分辨率屏幕尤为重要，因为在低分辨率下可能难以分辨子像素级别的微调。
• 它在操作系统用户界面、Web浏览器中的文本呈现、图形设计工具等领域都有广泛应用。

6. CSS和子像素渲染：

• 在CSS中，子像素渲染可以通过一些属性和值来实现，例如text-rendering: optimizeLegibility;，这可以让浏览器尽量优化文本的呈现。
• 使用-webkit-font-smoothing和-moz-osx-font-smoothing属性，可以进一步控制字体在Web浏览器中的平滑渲染。

需要注意的是，子像素渲染可能会对性能产生一定影响，因为它要求更多的计算来确定子像素的精确位置和颜色。因此，在使用子像素渲染时，需要权衡图像质量和性能。子像素渲染在高分辨率显示设备上更为明显，而在低分辨率设备上可能不太明显或无法有效运用。它通常用于确保文本和图像在屏幕上的最佳呈现。

CPU VS GPU

• CPU 即中央处理单元，是一种硬件组件，它是服务器的核心计算单元。它负责处理操作系统和应用程序运行所需的各类计算任务。
• 图形处理单元（GPU），是一种与 CPU 类似，但更专业的硬件组件。与普通 CPU 相比，它可以更高效地处理并行运行的复杂数学运算。最初的 GPU 专用于处理游戏和动画中的图形渲染任务，不过现在它们的用途已远超于此。

下表展示了CPU和GPU之间的区别：

CPU是通用处理器，适合处理各种不同类型的任务，而GPU专门设计用于图形和并行计算，适用于需要高吞吐量的任务。这两者通常一起工作，以在计算机系统中提供最佳性能。

视频地址 (需要🪜)

我们在之前计算机底层知识之CPU的文章中，介绍过CPU的组成，有兴趣的同学可以移步观看。

VRAM(视频内存)

视频内存是位于显卡上，有时也位于主板上，可供视频和计算机处理器访问的内存。拥有更多的视频内存，显卡和计算机能够以更快的速度处理更复杂的图形。

上面的图片显示，视频内存通常是显卡的一部分，而不是可拆卸的内存模块。在较旧的显卡上，视频内存可能仅为8MB，而在较新的显卡上可能高达数GB。

与计算机中的[RAM]（随机存取存储器）类似，视频内存临时存储与图形相关的数据。随着新的图形数据进入显卡，它会替换掉视频内存中不再需要的图形数据。当计算机关闭时，视频内存中的任何图形数据都会被清除。

backface-visibility

backface-visibility 是一个CSS属性，用于控制元素的背面是否可见。这个属性通常用于应用于进行3D变换的元素，比如使用CSS的transform属性进行元素旋转或翻转时，可以通过backface-visibility来指定元素的背面是否可见。

这个属性有两个可能的值：

1. visible（默认值）：表示元素的背面是可见的。这意味着元素在旋转或翻转时，不仅正面可见，而且背面也会显示在屏幕上。
   
2. hidden：表示元素的背面是不可见的。这意味着元素在旋转或翻转时，只有正面可见，背面将被隐藏起来，不会呈现在屏幕上。
   

backface-visibility通常与3D变换一起使用，以控制元素在旋转或翻转时的外观。例如，可以在3D场景中创建卡片翻转的效果，然后使用backface-visibility将背面隐藏，以确保只有正面可见。

示例：

.card {
  // 省去部分代码
  transform-style: preserve-3d; /* 启用3D变换 */
  backface-visibility: hidden; /*隐藏背面*/
  transition: transform 1s;
}
.card:hover{
 transform: rotateY(180deg); /* 以Y轴翻转180度 */
}

上面的示例将一个卡片元素进行了Y轴翻转，并通过backface-visibility: hidden;来确保只有正面可见，背面被隐藏。这样就创建了一个卡片翻转的效果。

线上代码

2. 牛刀小试

创建动画的主要要素是改变的CSS属性

现在我们对网页中的button做一个实验。

对应的html如下，就是一个简单到令人发指的button

<button class="btn">
  Hello CSS
</button>

然后，对其设置一个.btn的类名。

.btn {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: none;
    background: slateblue;
    color: white;
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
  }
.btn:hover {
  transform: translateY(-10px);
}

这个代码片段使用了:hover伪类，当用户的鼠标悬停在按钮上时，指定了额外的CSS声明，类似于JavaScript中的onMouseEnter事件。

为了将元素向上移动，我们使用了transform: translateY(-10px)。虽然我们也可以使用margin-top来实现这个效果，但transform: translate更适合这个任务。。

默认情况下，CSS中的更改是瞬间发生的。

在眨眼之间，我们的按钮就瞬间移动到了新位置！ （如果想看效果，可以从code 链接中查看效果，这节中的效果都可以查看）。瞬间完成的效果，显然不满足我们的需求。

所以，我们可以使用名为transition的属性来告诉浏览器从一个状态过渡到另一个状态：

.btn {
    /*
      和上面例子代码一致
    */
    transition: transform 250ms;
  }
  .btn:hover {
    transform: translateY(-10px);
  }

transition属性可以接受多个值，但只有两个是必需的：

1. 要处理动画的属性名称
2. 动画的持续时间

如果我们计划对多个属性进行动画处理，可以传递一个用逗号分隔的属性列表：

.btn {
  transition: transform 250ms, opacity 400ms;
}
.btn:hover {
  transform: scale(1.2);
  opacity: 0;
}

transition-property可以采用特殊的值：all。当指定为all时，任何发生变化的CSS属性都会进行过渡动画。

尽管使用all可能很诱人，因为它可以节省大量输入，特别是当我们要对多个属性进行动画处理时，但还是建议不要使用它。

如果你打开这个，就打开了潘多拉魔盒。