Ich versuche, mithilfe von CSS3 (Verläufe und Animationen) eine Animation zu erstellen, die der iPhone-Folie ähnelt, um den Verlauf zu entsperren. Aus irgendeinem Grund funktioniert die Hintergrundposition jedoch nur, wenn ich statische Pixelzahlen verwende und nicht, wenn ich Prozentsätze verwende. Im Idealfall kann ich diese Klasse auf jedes Element anwenden und die Animation ausführen, ohne dass Code für bestimmte Breiten erforderlich ist. Kann mich jemand in die richtige Richtung weisen?

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