Недавно я обнаружил, как "правильно" использовать анимацию CSS (ранее я отклонил их как неспособную создавать сложные последовательности, как вы могли бы в JavaScript). Итак, теперь я узнаю о них.
Для этого эффекта я пытаюсь выполнить градиентную "вспышку" в виде элемента, похожего на прогресс. Аналогично влиянию на собственные индикаторы выполнения Windows Vista/7.
@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;
}
Как вы можете видеть, я пытаюсь получить задержку в 4 секунды, за которой следует блеск, проходящий через 1 секунду, повторяющийся.
Однако, кажется, что animation-delay
применяется только к первой итерации, после чего блеск просто продолжает размахивать попеременно.
Я "разрешил" эту проблему следующим образом:
@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;
}
from
и 80%
точно совпадают, что приводит к "задержке" 80% длины анимации.
Это работает, но для моей следующей анимации мне нужна задержка для переменной (константа для определенного элемента, но переменная среди элементов, использующих анимацию), в то время как сама анимация остается той же длины.
С приведенным выше "решением", я получаю более медленную анимацию, когда все, что я хочу, - это более длительная задержка.
Можно ли использовать animation-delay
для всех итераций, а не только для первого?