CSS背景位置动画不起作用答案

【问题标题】：CSS background-position animation not workingCSS背景位置动画不起作用
【发布时间】：2021-03-11 06:10:11
【问题描述】：

我有一个背景图像，我想从右向左连续滚动。我希望图像覆盖整个屏幕，但是当我设置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% 那么它工作正常，但不覆盖整个屏幕？另外，这是图像：

【问题讨论】：

分享你的png图片
阅读https://stackoverflow.com/questions/41587802/css-animation-from-left-to-right
@TemaniAfif 我试着把图片放进去，但它是清晰背景上的白色星星，所以你甚至看不到它。
我们可以使背景颜色不同。我想这就是你看到它所做的
我已经发布了图片。

标签： html css background-position background-size

【解决方案1】：

这是另一个在伪元素上使用 translate 的想法，您可以使元素变大以有足够的空间进行无限运动：

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 */
}

【讨论】：

@SharkCoding 简单复制代码，我给出的是一个实现
我在屏幕上出现了一些我想要的图像和按钮的奇怪故障。图片不显示，当我将鼠标悬停在按钮上时，悬停效果会闪烁吗？
另外，我用上面的代码替换了我当前的代码，所以可能是错的？