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

Предположим, у нас есть анимация, которая должна длиться одну секунду, потом должна наступать пауза длительностью четыре секунды, затем анимация должна снова повториться. На первый взгляд, ничего сложного. Но на самом деле не все так просто, но все же реализуемо. Нужно просто имитировать паузу.

Что не подойдет

Существует свойство animation-delay , которое устанавливает время ожидания перед запуском анимации, но после ее запуска, каждая итерация повторяется непрерывно.

Решение: ключевые кадры без изменений

Вернемся к нашей предполагаемой анимации. Она должна длиться 1 секунду + пауза между итерациями 4 секунды = в сумме имеем 5 секунд.

Поэтому, при вызове анимации, мы должны указать общее количество секунд:

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

Для того чтобы анимация длилась всего 1 секунду, нужно чтобы все изменения происходили за 1/5 времени, то есть 20%. Вот как это будет выглядеть:

@keyframes move < 0% < transform: translate(0, 0); >/* Все изменения заканчиваются здесь */ 20% < transform: translate(200px, 0); >/* Между 20% и 100% ничего не меняется */ 100% < transform: translate(200px, 0); >>

Это можно записать более кратко опустив ключевой кадр 0%, так как предполагается изначальное значение, а так же использовать запись через запятую для повторяющихся действий:

Таким образом, с ключевыми кадрами можно проделывать все что угодно аж до последнего шага, а между ним и 100% все должно быть одинаковым.

Источник

animation-delay

Свойство animation-delay устанавливает время ожидания перед воспроизведением анимации. Значение 0s или 0ms, которое установлено по умолчанию, запускает анимацию сразу же, как только она применяется к элементу. Отрицательное значение также включает анимацию без задержек, но приводит к изменению последовательности начала анимации.

Допустимо указывать несколько значений, перечисляя их через запятую. Каждое значение будет применяться к свойству, заданному в параметрах animation-name .

Синтаксис

Значения

HTML5 CSS3 IE 10+ Cr Op Sa Fx

Объектная модель

[window.]document.getElementById(» elementID «).style.animationDelay

Браузеры

Chrome, Safari, Android и iOS поддерживают нестандартное свойство -webkit-animation-delay .

Opera до версии 12.10 поддерживает нестандартное свойство -o-animation-delay .

Firefox до версии 16.0 поддерживает нестандартное свойство -moz-animaition-delay .

CSS по теме

Источник

animation — delay

Свойство задаёт задержку воспроизведения CSS-анимации.

Пример

Скопировать ссылку «Пример» Скопировано

 .element  animation-name: circle-to-square; animation-duration: 2s; animation-iteration-count: infinite; animation-direction: alternate-reverse; animation-timing-function: ease-in; animation-delay: 1s;> .element  animation-name: circle-to-square; animation-duration: 2s; animation-iteration-count: infinite; animation-direction: alternate-reverse; animation-timing-function: ease-in; animation-delay: 1s; >    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Значением может быть любое число, как отрицательное, так и положительное. Если значение положительное, то будет задержка перед началом анимации. Если значение отрицательное, то анимация начнётся как бы за кадром.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

Подробнее об анимациях написано в статье «CSS-анимации».

Источник

animation-delay

Экспериментальная возможность: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Описание

CSS свойство animation-delay определяет время задержки перед стартом анимации.

Интерактивный пример

Значение 0s, которое является значением по умолчанию, указывает на то, что анимация должна начаться непременно. В противном случае, старт анимации будет отложен на указанное время.

При указании отрицательного значения, анимация также начнётся непременно, но её воспроизведение начнётся не с первого ключевого кадра, а так, будто часть анимации уже была показана. Например, если вы укажете значение -1s, анимация будет начата с ключевого кадра, когда 1 секунда анимации уже была воспроизведена.

Начальное значение	0s
Применяется к	все элементы, ::before и ::after псевдоэлементы
Наследуется	нет
Обработка значения	как указано
Animation type	Not animatable

Синтаксис

animation-delay: 3s; animation-delay: 2s, 4ms; 

Значения

Время задержки перед стартом анимации. Может быть определено в секундах (s), либо в миллисекундах (ms). Если вы не укажите единицу измерения, свойство будет недействительным.

Формальный синтаксис

Примеры

Спецификации

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

This page was last modified on 7 нояб. 2022 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

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

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

Не наш случай

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

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

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

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

Курс «Frontend-разработчик»

— Научитесь верстать сайты для всех типов устройств.

— Сможете использовать JavaScript для работы в браузере.

— 77 часов теории, 346 часов практики.

— Выполните 5 масштабных проектов для портфолио.

— Помощь с поиском работы или стажировки.

Курс «веб-разработчик с нуля»

— Научитесь программировать на JavaScript и PHP.

— Сможете создавать сайты и веб-приложения.

— Сможете уверенно работать и с фронтендом, и с бэкендом веб-сервисов.

— Выполните 9 масштабных проектов для портфолио

— Помощь с поиском работы или стажировки.

Курс «PHP-разработчик с нуля»

— Научитесь создавать сайты и веб-приложения на языке PHP.

— Изучите актуальные фреймворки Laravel, Simfony и Yii2.

— 78 часов теории и 361 час практики.

— Вы создадите 5 масштабных проектов для портфолио.

— Помощь с поиском работы или стажировки.

Источник