提问人：Thomas Pötz 提问时间：10/4/2023 最后编辑：marc_sThomas Pötz 更新时间：10/4/2023 访问量：33
CSS 伪元素的翻译速度比主元素快
CSS pseudo elements translate faster than main element
问：
我有一个简单的div，里面有前后伪元素。我使用关键帧沿 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>答：
1赞
jessman5
10/4/2023
#1
伪元素的运行速度明显更快，因为您同时也在为它们的父元素制作动画！由于父元素也下降，因此伪元素的路径会更长，但它的动画持续时间相同。因此，在相同的时间内，它有更多的路要走。这就是为什么它看起来更快。
使伪元素的动画速度变慢，或者让两个元素彼此相邻，而没有动画父元素。<div>
1赞
Sean
10/4/2023
#2
伪元素是其主要元素的子元素。如果翻译 main 元素，则 pseudo 元素会随行。将相同的转换应用于元素及其伪元素有点像从已经以 60 英里/小时的速度行驶的汽车中抛出 60 英里/小时的球场——你最终会得到一个以 120 英里/小时的速度行驶的球。
评论