Задержка анимации CSS в повторении ⇐ CSS

[Anonymous]

Я недавно обнаружил, как «правильно» использовать анимации CSS (ранее я отклонял их как невозможность создавать сложные последовательности, как вы могли бы в JavaScript). Так что теперь я узнаю о них. Аналогично влиянию на нативные стержни Windows Vista /7 Прогресс. < /P>

Код: Выделить всё

@keyframes barshine {
from {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
to {background-image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);}
}
.progbar {
animation: barshine 1s 4s linear infinite;
}
< /code>

Как вы можете видеть, я пытаюсь иметь задержку в 4 секунды, а затем сияет за 1 секунду, повторяю. «Решено» этот вопрос следующим образом: < /p>

@keyframes expbarshine {
from {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
80% {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
to {background-image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);}
}
.progbar {
animation: barshine 5s linear infinite;
}
< /code>

from< /code> и 80% < /code> точно одинаковы, что приводит к «задержке» 80% длины анимации. < /p>

Это работает, но для моей следующей анимации мне нужна задержка, чтобы быть переменной (постоянной для конкретного элемента, но переменная между элементами, которые используют анимацию), в то время как сама анимация остается точно такой же. «Решение», я бы получил более медленную анимацию, когда все, что мне нужно,-это более длинная задержка. 

Можно ли иметь анимацию delay 

применить ко всем итерациям, а не только первое?

Подробнее здесь: https://stackoverflow.com/questions/138 ... -repeating