我正在嘗試使用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;
  }
}

添加了您的代碼

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/

關于MDN的文章對此做了很好的解釋

tldr: 要使用百分比背景定位，您的背景大小不應等于您要定位的尺寸的100%。N%位置意味著N%的背景被映射到N%的元素上。因為漸變自動具有100%x100%的大小，設置背景位置似乎沒有效果，除非你設置背景大小為某個值，例如200%