在我们深入研究如何在CSS中创建一个真实的动态模糊之前，有必要快速了解一下什么是动态模糊，这样我们就可以更好地了解我们要复制的是什么。
你是否曾经拍摄过快速移动的物体，尤其是在光线较暗的情况下，它会变成模糊的条纹?或者是整个相机抖动，整个镜头变成了一连串的条纹?这就是运动模糊，这是相机工作的副产品。
想象一个相机。它有一个百叶窗，一扇门打开让光线进来，然后关上阻止光线进来。从它打开的时候到关闭的时候，是一张单独的照片，或者一个移动图像的单独一帧。
一个穿红衬衫的模糊男子骑着一辆蓝色自行车在森林中疾驰。
如果在快门打开的时候，画面的主体在移动，我们最终拍摄的是一个物体在画面中移动的照片。在胶片上，这表现为一种稳定的涂片，从起点到终点，被摄对象被放置在无数个地方。移动的物体最终也是半透明的，在它后面可以看到部分背景。
计算机所做的就是模拟几个子帧，然后以不透明度的一小部分将它们组合在一起。在运动路径上，将同一物体的大量副本放在略微不同的位置，就会产生相当令人信服的运动模糊的摹本。
视频合成应用程序倾向于设置他们的动态模糊应该有多少细分。如果你把这个值设置得很低，你可以看到这个技术是如何工作的，就像这样，一个动画的一个简单的白点，每帧有四个样本:
四个重叠的白色不透明的圆圈在黑色的背景。
每帧四个样本。
十二个重叠的白色不透明的圆圈在黑色的背景。
这里是每帧12个样本。
32个重叠的白色不透明的圆圈在黑色的背景。
当我们达到每帧32个样本时，它已经非常接近真实了，特别是在每秒多帧的情况下。
制作令人信服的动态模糊所需的样本数量完全与内容相关。一些边缘锋利、移动速度超快的小物体需要很多子帧;但是一些模糊的缓慢移动的东西可能只需要几个。一般来说，使用越多，效果越有说服力。
在CSS中完成
为了在CSS中近似这种效果，我们需要创建大量相同的元素，使它们半透明，并将它们的动画稍微偏移几分之一秒。
首先，我们将使用CSS转换来建立我们想要的动画基础。我们将用一个简单的黑点，并分配它在悬停(或点击，如果你在移动)转换。我们还将动画的边界半径和颜色，以显示这种方法的灵活性。
这是没有运动模糊的基础动画:
现在，让我们制作20个相同的黑点副本，所有的副本都被放置在相同的绝对位置。每个副本都有10%的不透明度，这可能比数学上的正确稍微多了一点，但我发现我们需要使它们更不透明，以看起来足够坚固。
下一步就是奇迹发生的地方。我们为每个点对象的克隆添加一个稍微增加的过渡延迟值。它们都将运行完全相同的动画，但它们每个都会有3毫秒的偏移。
这种方法的美妙之处在于，它创建了一个伪运动模糊效果，可用于大量不同的动画。我们可以在那里添加颜色变化，缩放过渡，奇怪的时间，和运动模糊效果仍然有效。
使用20个克隆对象将工作在大量的快速和缓慢的动画，但很少仍然可以产生合理的运动模糊的感觉。您可能需要调整克隆对象的数量，它们的不透明度，以及转换延迟的数量，以配合您的特定动画。我们刚才看到的演示有略微超频的模糊效果，使它更加突出。
最终，随着计算机能力的提高，我期望一些主要的浏览器可能会开始提供这种效果。这样我们就可以摆脱拥有20件相同物品的荒谬。同时，这也是一种接近真实运动模糊的合理方法。
