Фоновая позиция, не работающая с анимацией 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/