具有重复背景的CSS转换

所以这个动画存在：

我想用它作为一个完整的背景，但是它会导致浏览器延迟。所以我将其转换为使用transform来减少所需的资源。然而，我遇到了一个问题，它不再无限重复背景，我不知道如何使用转换功能解决这个问题。我有两个小问题，我已经试过了，但一直无法找到答案，我想知道这是否可能，或者我的方向是否正确

第一个是使用伪选择器

第二个是不简单的

是朝着正确的方向走，还是根本不可能

---

谢谢大家!

我认为transform也会滞后，因为我看到的是，不是更改背景位置，而是使用translate更改容器位置，但仍然使用animate，这就是滞后的原因。@NasirT是否可以使用transform更改背景位置？正在研究解决方案。给我几分钟。@NasirT既然我不确定如何使用transform来实现，那么解决方案是什么。transition的问题是您无法循环它。canvas的问题是，你必须想出一个逻辑和复杂的数学公式来保持动画。例如，这是一个五彩纸屑代码，我与另一个开发人员合作帮助他解决问题，其中包含许多复杂的公式。（）第三个选项基本上与css相同，但它将使用javascript而不是浏览器来保持选项卡。这实际上有点帮助。但我在这里可能是错的，所以你需要研究一下。我认为转换也会滞后，因为我看到的是，不是改变背景位置，您正在使用translate更改容器位置，但仍然使用animate，这是造成延迟的原因。@NasirT是否可以使用transform？处理解决方案来更改背景位置。给我几分钟。@NasirT既然我不确定如何使用transform来实现，那么解决方案是什么。transition的问题是您无法循环它。canvas的问题是，你必须想出一个逻辑和复杂的数学公式来保持动画。例如，这是一个五彩纸屑代码，我与另一个开发人员合作帮助他解决问题，其中包含许多复杂的公式。（）第三个选项基本上与css相同，但它将使用javascript而不是浏览器来保持选项卡。这实际上有点帮助。但我可能错了，所以你需要研究一下。

body { background-color:#333; }
#snow{
    background: none;
    font-family: Androgyne;
    background-image: url('http://www.wearewebstars.dk/codepen/img/s1.png'), url('http://www.wearewebstars.dk/codepen/img//s2.png'), url('http://www.wearewebstars.dk/codepen/img//s3.png');
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index:1;
    -webkit-animation: snow 10s linear infinite;
    -moz-animation: snow 10s linear infinite;
    -ms-animation: snow 10s linear infinite;
    animation: snow 10s linear infinite;
}
@keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}

#snow-l, #snow-m, #snow-s {
  position: fixed;
  width: 100%;
  height: 100%;
    overflow: hidden;
}

#snow-l:before, #snow-m:before, #snow-s:before {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: -1;
    pointer-events: none;
}

#snow-l:before {
    animation: snow-l 100s linear infinite;
    background: url("https://static1.xenogamers.com/styles/default/xenogamers/christmas/snow-l-c.png") 0 0 repeat;
}
@keyframes snow-l {
0% {
    transform: translate(0px, 0px);
}
50% {
    transform: translate(2500px, 5000px);
}
100% {
    transform: translate(5000px, 10000px);
}
}

#snow-m:before {
    animation: snow-m 100s linear infinite;
    background: url("https://static1.xenogamers.com/styles/default/xenogamers/christmas/snow-m-c.png") 0 0 repeat;
}
@keyframes snow-m {
0% {
    transform: translate(0px, 0px);
}
50% {
    transform: translate(1000px, 2000px);
}
100% {
    transform: translate(2000px, 4000px);
}
}

#snow-s:before {
    animation: snow-s 100s linear infinite;
    background: url("https://static1.xenogamers.com/styles/default/xenogamers/christmas/snow-s-c.png") 0 0 repeat;
}
@keyframes snow-s {
0% {
    transform: translate(0px, 0px);
}
50% {
    transform: translate(-1000px, 1500px);
}
100% {
    transform: translate(-1000px, 3000px);
}
}

#container {
  position: relative;
  overflow: hidden;
}

#snow * {
    content: "";
    display: block;
    height: 100%;
    pointer-events: none;
    position: fixed;
    width: 100%;
    z-index: -1;
}

#snow-l {
    animation: snow-l 10s linear infinite;
    background-image: url("https://static1.xenogamers.com/styles/default/xenogamers/christmas/snow-l-c.png");
  background-repeat: repeat;
}
@keyframes snow-l {
0% {
    transform: translate(0px, 0px);
}
50% {
    transform: translate(500px, 500px);
}
100% {
    transform: translate(500px, 1000px);
}
}

#snow-m {
    animation: snow-m 10s linear infinite;
    background-image: url("https://static1.xenogamers.com/styles/default/xenogamers/christmas/snow-m-c.png");
  background-repeat: repeat;
}
@keyframes snow-m {
0% {
    transform: translate(0px, 0px);
}
50% {
    transform: translate(100px, 200px);
}
100% {
    transform: translate(200px, 400px);
}
}

#snow-s {
    animation: snow-s 10s linear infinite;
    background-image: url("https://static1.xenogamers.com/styles/default/xenogamers/christmas/snow-s-c.png");
  background-repeat: repeat;
}
@keyframes snow-s {
0% {
    transform: translate(0px, 0px);
}
50% {
    transform: translate(-100px, 150px);
}
100% {
    transform: translate(-100px, 300px);
}
}