Estou tentando usar CSS3 (gradientes e animações) para fazer uma animação semelhante ao slide do iphone para desbloquear o gradiente. No entanto, por algum motivo, a posição de segundo plano só funciona quando eu uso números de pixels estáticos e não quando uso porcentagens. Idealmente, eu seria capaz de aplicar essa classe a qualquer elemento e fazer com que a animação funcionasse, sem precisar codificar para larguras específicas. Alguém pode me apontar na direção certa?

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;
  }
}