我有一个简单的 div，带有 before 和 after 伪元素。 我使用关键帧来沿 y 轴变换所有内容。 伪元素的移动速度比主要元素快，我不知道为什么。 我在伪元素上明确设置了位置和插入并继承了动画。
这是我的整个源代码示例：
body {
width: 100%;
height: 100%;
background-color: black;
}
.snow {
position: absolute;
content: "";
inset: 0;
background-image: radial-gradient(4px 4px at 100px 50px, #fff, transparent);
animation: snowAnimation 4s linear infinite;
}
.snow::after,
.snow::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(4px 4px at 100px 50px, #fff, transparent);
animation: inherit;
}
@keyframes snowAnimation {
from {
transform: translateY(0);
}
to {
transform: translateY(650px);
}
} <body>
<div class="snow"></div>
</body>伪元素运行速度明显更快，因为您也同时为其父元素设置动画！由于父级也会下降，因此您可以使伪元素的路径更长，但它的动画持续时间相同。因此，在相同的时间内，它可以走更多的路。这就是为什么它看起来更快。
使伪元素的动画变慢，或者让两个元素
<div>伪元素是其主要元素的子元素。如果翻译主要元素，伪元素也会随之而来。对元素及其伪元素应用相同的平移有点像以 60 英里每小时的速度向一辆以 60 英里每小时的速度行驶的汽车的运动方向扔一个球，最终会得到一个以 120 英里每小时的速度行驶的球。