Arka plan konumu CSS animasyonu ve doğrusal degrade ile çalışmıyor

Question

Degradeyi açmak için iphone slaytına benzer bir animasyon yapmak için CSS3 (degradeler ve animasyonlar) kullanmayı deniyorum. Ancak, bazı nedenlerden dolayı, arka plan konumu, yalnızca yüzdeler kullandığımda değil, statik piksel sayılarını kullandığımda çalışır. İdeal olarak, bu sınıfı herhangi bir öğeye uygulayabileceğim ve belirli genişlikler için kod yazmanıza gerek kalmadan animasyon çalışmasına sahip olacağım. Biri bana doğru yönde işaret edebilir mi?

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

Eklenen kodunuzu

background-size: 250% 250%; 

Örnek

.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/