CSS伪元素动画速度快于主元素问题求助

问题根源 #

伪元素属于主元素的子级定位元素，当主元素执行transform: translateY(650px)动画时，伪元素的整个坐标系会跟着主元素一起移动。而你让伪元素继承了相同的动画，相当于在主元素移动的基础上，伪元素自己再额外移动650px，总位移是主元素的两倍，所以视觉上伪元素的移动速度看起来是主元素的两倍。

解决方法 #

核心是避免transform动画的叠加效应，可以通过两种方式实现：

方法一：将主元素设为定位容器，让所有雪花层独立执行动画 #

把主元素改为相对定位作为容器，让主元素和伪元素都作为独立的雪花层执行动画，这样每个元素的动画都是基于页面坐标系的，不会出现叠加：

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: black;
}
.snow {
  position: relative;
  width: 100%;
  height: 100%;
  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;
}

/* 给伪元素设置不同初始位置和延迟，实现更自然的雪花效果 */
.snow::before {
  background-position: 200px 100px;
  animation-delay: 1s;
}

.snow::after {
  background-position: 300px 150px;
  animation-delay: 2s;
}

@keyframes snowAnimation {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(650px);
  }
}

<body>
  <div class="snow"></div>
</body>

方法二：改用背景位置动画替代transform #

如果不想调整定位结构，可以把动画目标从transform改为background-position-y，这样主元素和伪元素的动画都是修改背景位置，不会出现坐标系叠加的问题：

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: black;
}
.snow {
  position: absolute;
  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;
}

.snow::before {
  background-position: 200px 100px;
}

.snow::after {
  background-position: 300px 150px;
}

@keyframes snowAnimation {
  from {
    background-position-y: 0;
  }
  to {
    background-position-y: 650px;
  }
}

内容的提问来源于stack exchange，提问作者Thomas Pötz