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

【问题标题】：Background-position not working with CSS animation and linear gradient背景位置不适用于 CSS 动画和线性渐变
【发布时间】：2016-04-14 02:09:41
【问题描述】：

我正在尝试使用 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;
  }
}

【问题讨论】：

考虑使用视口宽度而不是百分比？ (100vw)
@EoghanTadhg 获取背景百分比还是渐变？
放在背景位置：jsfiddle.net/7wLtzvLr可能是我理解错了。
这使它循环了很多。理想情况下，它会移动一个完整宽度，然后从头开始

标签： css animation css-animations

【解决方案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/

【讨论】：

你能解释一下为什么 background-size: 250% 250%;在这里工作？