Estoy intentando usar CSS3 (gradientes y animaciones) para hacer una animación similar a la diapositiva del iPhone para desbloquear el gradiente. Sin embargo, por alguna razón, la posición de fondo solo funciona cuando uso números de píxeles estáticos y no cuando uso porcentajes. Idealmente, podría aplicar esta clase a cualquier elemento y hacer que la animación funcione, sin necesidad de codificar anchos específicos. ¿Alguien puede señalarme en la dirección correcta?

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