CSS keyframe анимация с задержкой между итерациями

CSS keyframe анимация с задержкой между итерациями

От автора: к примеру, вам нужно, чтобы анимация длилась одну секунду с задержкой в 4 секунды перед повтором. Вроде бы все просто. Оказывается, не все так просто, но выполнимо.Анимацию придется сымитировать.

Не наш случай

Есть свойство animation-delay, но оно нам не поможет. Свойство задерживает первый старт анимации, после чего она выполняется непрерывно.

Решение: keyframe анимация без изменений

Посчитайте в уме. Я хочу, чтобы анимация длилась одну секунду. ПЛЮС я хочу сделать задержку в 4 секунды между итерациями. РАВНО в сумме 5 секунд.

То есть во время вызова keyframe анимации вам необходимо использовать эту сумму:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Но теперь наша @keyframes анимация будет длиться 5 секунд:

Чтобы анимация длилась 1 секунду, нужно вносить изменения каждую 1/5 времени или 20%. На словах это будет вот так:

Можно сократить код, так как значение 0% заранее подразумевается, а этапы анимации можно перечислить через запятую:

Записать можно как угодно. Главное, чтобы правильно были заданы все свойства между финальным этапом и 100% анимации. Демо

Автор: Chris Coyier

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. Alex

    Спасибо! То, что нужно!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree