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

到我们每帧有32个样本时，它已经接近于完全真实了，尤其是以每秒多个帧的速度观看时。

运动模糊所需的样本数量完全与内容有关。边缘锋利的小东西移动得很快，将需要很多子帧。但是一些模糊的动作缓慢移动可能只需要几个。通常，使用更多会产生更令人信服的效果。

用CSS做到这一点

---

为了在CSS中近似这种效果，我们需要创建大量相同的元素，使它们成为半透明的，并将它们的动画偏移一秒钟。

首先，我们将使用CSS过渡为想要的动画设置基础。我们将使用一个简单的黑点，然后将其分配给悬停时的变换（如果您在移动设备上，则点按）。我们还将为边框半径和颜色设置动画，以显示此方法的灵活性。

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

HTML：

Hover / Tap

.container {

width: 300px;

height: 100px;

position: relative;

margin: 100px auto;

border-radius: 50px;

border: 3px dotted #eee;

text-align: center;

font-family: sans-serif;

padding-top: 10px;

}

.dot {

position: absolute;

background: black;

width: 50px;

height: 50px;

border-radius: 50%;

transform: rotate(0deg);

top: 25px;

left: 25px;

transition: all 0.75s cubic-bezier(.71,0,.33,1.56) 0ms;

}

.container:hover .dot {

transform: rotate(360deg);

border-radius: 0%;

left: 225px;

background: pink;

}

效果图：

现在，让我们制作黑点的20个相同的副本，并将它们完全放置在具有绝对位置的完全相同的位置。每个副本的不透明度为10％，比数学上正确的数字略高一些，但是我发现我们需要使它们更加不透明以看起来足够牢固。

下一步就是奇迹发生的地方。我们为点对象的每个克隆添加一个稍微增加的过渡延迟值。它们都将运行完全相同的动画，但是它们各自将偏移三毫秒。

HTML代码：

Hover / Tap

CSS代码：

.container {

width: 300px;

height: 100px;

position: relative;

margin: 100px auto;

border-radius: 50px;

border: 3px dotted #eee;

text-align: center;

font-family: sans-serif;

padding-top: 10px;

}

.dot {

position: absolute;

background: black;

width: 50px;

height: 50px;

border-radius: 50%;

transform: rotate(0deg);

top: 25px;

left: 25px;

opacity: 0.1;

transition: all 0.75s cubic-bezier(.71,0,.33,1.56) 0ms;

}

.container:hover .dot {

transform: rotate(360deg);

border-radius: 0%;

left: 225px;

background: pink;

}

.dot.two {

transition-delay: 3ms;