CSS 背景位置动画不工作

Question

我有一张背景图片，我想从右向左连续滚动。我希望图像覆盖整个屏幕，但是当我设置 background-size: cover; 时它根本没有动画。我该如何解决这个问题？

HTML

<body>
  ...
</body>

CSS

body {
  background-color: rgb(15, 5, 40);
  background-image: url('./images/star background.png');
  background-repeat: repeat;
  background-position: top left;
  background-size: cover;
  animation: myMove 3s linear infinite;
}

@keyframes myMove {
  from { background-position-x: right; }

  to { background-position-x: left }
}

如果我设置 background-size #px #px; 或 initial 或 X% Y% 那么它工作正常，但没有覆盖整个屏幕？另外，这是图像：

Answer 1

这是在伪元素上使用翻译的另一个想法，您可以使元素变大以获得足够的空间进行无限移动：

html::before {
  content:"";
  position:fixed;
  top:0;
  left:0; /* change to right for the opposite direction */
  bottom:0;
  width:200%;
  background:url(https://i.stack.imgur.com/wJKLc.png) 0/50% auto;
  animation:move 2s linear infinite;
}

@keyframes move {
  to {transform:translateX(-50%);} /* change to "50%" for the opposite direction */
}

CSS 背景位置动画不工作

CSS background-position animation not working

html

css

background-position

background-size