Есть ли способ поставить задержку между шагами анимации на css?

Question

[zwezew]

Есть ли способ поставить задержку между шагами анимации на css?

@keyframes {
    from {}
   //задержка
   to {}
}

Answer 1

[Андрей Федоров]

Еще шаги добавьте в процентах от продолжительности анимации. 10% {} 20%{} и т.п.

Comments

[zwezew]

Пробовал так, но задержка неравномерная.
codepen

[Андрей Федоров]

zwezew, Просто надо финальное состояние тоже задавать. Держите

[zwezew]

Андрей Федоров, спасибо, но steps исключает transition эффект анимации

[Андрей Федоров]

zwezew, а вы в курсе что transition на background-image не работает?

[zwezew]

Андрей Федоров, работает в хроме

[Андрей Федоров]

zwezew, не работает даже в хроме. у вас не background-image подвергнут transition, а все множество свойств background. background-position, background-size например могут работать, потому что имеют численные значения. все что имеет текстовые значения не работает через transition.

[zwezew]

Андрей Федоров, вот пример, в хроме работает. Наведите курсор на картинку.

[Андрей Федоров]

zwezew, это самодеятельность разработчиков. https://developer.mozilla.org/en-US/docs/Web/CSS/C...

Answer 2

[Дмитрий]

Пример

Comments

[zwezew]

это задержка перед анимацией отдельных элементов