背景位置不适用于 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/