CSSアニメーションとリニアグラデーションで背景位置が機能しない

Question

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

Answer 1

が追加されましたあなたのコード

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/