背景位置不适用于 CSS 动画和线性渐变

Question

我正在尝试使用 CSS3（渐变和动画）制作类似于 iphone 幻灯片的动画来解锁渐变。 但是，由于某种原因，背景位置仅在我使用静态像素数时有效，而在我使用百分比时无效。 理想情况下，我可以将此类应用于任何元素，并让动画正常工作，而无需针对特定宽度进行编码。 有人可以指出我正确的方向吗？

JSFiddle： https ://jsfiddle.net/ekLamtbL/

.slideToUnlock {
  background: linear-gradient(-90deg, black 0%, gray 40%, white 45%, gray 55%, black 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
    -webkit-animation: slidetounlock 5s infinite;
    animation: slidetounlock 5s infinite;
    -webkit-animation-direction: normal;
    animation-direction: normal;
}

@-webkit-keyframes slidetounlock {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 100% 0;
  }
}

Answer 1

添加了您的代码

background-size: 250% 250%;

例子

.slideToUnlock {
  background: linear-gradient(-90deg, black 0%, gray 40%, white 45%, gray 55%, black 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  -webkit-animation: slidetounlock 5s infinite;
  animation: slidetounlock 5s infinite;
  -webkit-animation-direction: normal;
  animation-direction: normal;
  background-size: 250% 250%;
}

https://jsfiddle.net/ekLamtbL/2/

Answer 2

MDN 上的文章解释得很好

tldr：要使用百分比background-position ，您的背景大小不应等于您要定位的尺寸的100% 。 N%位置意味着N%的背景映射到N%的元素。 由于渐变自动具有100%x100%的大小，因此设置background-position似乎没有效果，除非您将background-size设置为某个值，例如200%