Я пытаюсь использовать 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;
  }
}