如何使用 CSS 过渡创建逼真的运动模糊

在我们深入探讨如何用 CSS 创建逼真的运动模糊之前，我们先快速了解一下运动模糊是什么，这样我们就能更好地了解我们要再现的内容。

您是否曾经拍摄过快速移动的物体照片，尤其是在弱光条件下，照片变成了模糊的条纹？ 或者可能是整个相机抖动，导致整个画面变成一系列条纹？ 这就是运动模糊，它是相机工作方式的副产品。

运动模糊 101

想象一台相机。 它有一个快门，一个打开让光线进入的门，然后关闭以阻止光线进入。 从它打开到关闭的时间，就是一张照片，或者是一段移动图像的一帧。

如果帧的主题在快门打开期间移动，我们最终会拍摄到物体在帧中移动的照片。 在胶片上，这显示为稳定的涂抹，主题处于从起点到终点的无限多个位置。 移动的物体也会变成半透明的，背景的一部分在它后面可见。

计算机用来模拟这种效果的方法是模拟多个子帧，然后将它们以部分不透明度组合在一起。 在运动路径上放置许多相同物体的副本，但在略微不同的位置，可以创建出逼真的运动模糊效果。

视频合成应用程序通常具有设置其运动模糊应该有多少个细分的设置。 如果您将此值设置得非常低，您就可以准确地看到该技术的工作原理，例如，一个简单白色圆点的动画帧，每帧有四个样本

创建逼真运动模糊所需的样本数量完全取决于内容。 小型且具有尖锐边缘的物体以极快的速度移动需要大量子帧； 但模糊的物体缓慢移动可能只需要几个子帧。 通常，使用更多子帧会创建更逼真的效果。

在 CSS 中实现

为了在 CSS 中近似模拟这种效果，我们需要创建大量相同的元素，使它们半透明，并通过非常短的时间间隔偏移它们的动画。

首先，我们将使用 CSS 过渡设置我们要使用的基本动画。 我们将使用一个简单的黑色圆点，并在悬停（或在移动设备上点击）时为它分配一个变换。 我们还会为边框半径和颜色设置动画，以显示这种方法的灵活性。

这是没有运动模糊的基本动画

现在，让我们创建 20 个相同的黑色圆点副本，所有副本都使用绝对定位放置在完全相同的位置。 每个副本的不透明度为 10%，这可能比数学上正确的值略高，但我发现我们需要使它们更加不透明，以便看起来足够牢固。

下一步是神奇的发生之处。 我们为圆点对象的每个克隆添加了一个略微增加的 transition-delay 值。 它们将全部运行完全相同的动画，但它们将分别偏移 3 毫秒。

这种方法的优点是，它可以为大量不同的动画创建伪运动模糊效果。 我们可以为它添加颜色变化、缩放过渡、奇数时间，而运动模糊效果仍然有效。

使用 20 个对象克隆可以满足许多快速和慢速动画的需求，但较少的克隆仍然可以产生合理的运动模糊感。 您可能需要调整克隆对象的数量、不透明度以及过渡延迟量，以适合您的特定动画。 我们刚刚查看的演示的模糊效果略微超速，以使它更加明显。

---

最终，随着计算机能力的进步，我预计一些主要的浏览器可能会开始原生提供这种效果。 然后，我们可以摆脱拥有 20 个相同对象的荒谬做法。 在此之前，这是一个模拟逼真运动模糊的合理方法。