animation-delay в CSS


Содержание

Про CSS

Css Animation

Свойство animation позволяет анимировать элементы страницы.

Можно управлять длительностью анимации, повторением, направлением, типом движения и шагами. Анимировать можно любые элементы, в том числе псевдо-элементы.

Обязательное условие — наличие конкретных значений. Свойства со значением auto не анимируются.

Сафари в настоящее время не поддерживает анимацию псевдоэлементов, для просмотра записи воспользуйтесь другими браузерами

Пример кода анимации:

move — имя анимации 15s — длительность infinite — бесконечное повторение linear — тип движения

@keyframes

Сама анимация задается внутри блока @keyframes . После @keyframes задается имя анимации, а потом внутри фигурных скобок — её шаги.

Шаги можно задавать через проценты или с помощью ключевых слов from и to . При этом в шагах можно менять тип анимации ( animation-timing-function ):

Animation-name

Используется для задания имени анимации.

Возможные значения: одно или несколько имен анимации. Значение по умолчанию: нет.

animation-name: move; — одна анимация. animation-name: move, sun-color; — две анимации, имена задаются через запятую.

Animation-duration

Длительностью анимации управляет свойство animation-duration .

Возможные значения: время в секундах (s) или миллисекундах (ms). В случае нескольких анимаций время для каждой из них можно задать через запятую. Исходное значение — 0s.

Animation-timing-function

Свойство определяет тип анимации.

Плавная анимация ease — скольжение (значение по умолчанию) linear — ровное движение ease-in — ускорение к концу ease-out — ускорение в начале ease-in-out — более плавное скольжение, чем ease

cubic-bezier(число,число,число,число) позволяет задавать сложный тип анимации. Значения удобно подбирать на cubic-bezier.com.

Пошаговая анимация step-start и step-end — позволяют задать пошаговую анимацию, обязательно задавать конкретные шаги. При этом с step-start изменения происходят в начале шага, а с step-end — в конце.

step-end . Если выставить step-start , счетчик будет начинаться с единиц.

steps(число) — позволяет задать количество шагов, за которые будет выполнена анимация, при этом можно задать только последний шаг без необходимости указывать промежуточные.

Animation-iteration-count

Управляет повторением анимации. Значение по умолчанию: 1 (анимация проигрывается один раз).

число — сколько раз проиграть анимацию. infinite — бесконечное повторение.


Animation-direction

Отвечает за направление анимации.

normal — анимация проигрывается в обычном направлении, с начала и до конца. reverse — анимация проигрывается в обратном направлении, то есть с конца. alternate — анимация проигрывается с начала и до конца, а затем в обратном направлении. alternate-reverse — анимация проигрывается с конца до начала, а затем в обратном направлении.

Animation-play-state

Управляет остановкой и проигрыванием анимации.

Возможные значения: running — анимация проигрывается (значение по умолчанию). paused — анимация застывает на первом шаге.

Управлять шагом, где будет остановка, не получается, но можно останавливать анимацию по :hover :

Animation-delay

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

Возможные значения: время в секундах (s) или миллисекундах (ms). Значения могут быть отрицательными. В случае нескольких анимаций время для каждой из них можно задать через запятую. Исходное значение — 0s.

Animation-fill-mode

Свойство определяет будет ли анимация воздействовать на элемент вне времени воспроизведения анимации.

none — анимация воздействует на элемент только во время воспроизведения, по окончании элемент возвращается в исходное состояние. forwards — анимация воздействует на элемент по окончании воспроизведения. backwards — анимация воздействует на элемент до начала воспроизведения. both — анимация воздействует на элемент и до начала, и после окончания воспроизведения.

Чтобы увидеть как backwards и both работают до начала воспроизведения анимации, задана задержка animation-delay: 3s; . Так же для этого имеет смысл открыть пример в новом окне.

Все эти свойства можно записать с помощью короткой записи, например:

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

CSS свойство animation-delay

Устанавливает время ожидания перед запуском анимации. Значения указываются в секундах (s) или миллисекундах (ms). Значение 0s или 0ms запускает анимацию сразу же.

CSS синтаксис

Возможные значения

Значение Описание
время Необязательный параметр. Определяет количество секунд (s) или миллисекунд (ms) ожидания перед тем, как запустить анимацию. Значение по умолчанию 0. Можно использовать отрицательные значения.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

Пример

Подождать две секунды, а затем начать анимацию

Набор анимаций animate.css

Набор CSS классов для анимации различных элементов на сайте

Для использования animate.css на сайте нужно просто установить стили и затем подключать к нужным блокам понравившиеся эффекты.

Примеры:

ANIMATE.CSS


Выберите нужный эффект:

Установка:

Просто добавляем на сайт стили animate.css:

Использование:

Чтобы анимировать элемент, нужно добавить к нему класс animated и эффект из таблицы ниже:

Название класса
bounce flash pulse rubberBand
shake headShake swing tada
wobble jello bounceIn bounceInDown
bounceInLeft bounceInRight bounceInUp bounceOut
bounceOutDown bounceOutLeft bounceOutRight bounceOutUp
fadeIn fadeInDown fadeInDownBig fadeInLeft
fadeInLeftBig fadeInRight fadeInRightBig fadeInUp
fadeInUpBig fadeOut fadeOutDown fadeOutDownBig
fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig
fadeOutUp fadeOutUpBig flipInX flipInY
flipOutX flipOutY lightSpeedIn lightSpeedOut
rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft
rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight
rotateOutUpLeft rotateOutUpRight hinge jackInTheBox
rollIn rollOut zoomIn zoomInDown
zoomInLeft zoomInRight zoomInUp zoomOut
zoomOutDown zoomOutLeft zoomOutRight zoomOutUp
slideInDown slideInLeft slideInRight slideInUp
slideOutDown slideOutLeft slideOutRight slideOutUp
heartBeat

Можно также добавить класс infinite для бесконечного цикла, задержку и продолжительность эффекта:

animation-delay

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

Общие сведения

Значение по умолчанию равное «0s» означает что анимация начнётся сразу как только будет применена к элементу. Положительное значение времени представляет собой смещение, которое определяет насколько долго будет длиться задержка между началом анимации и началом её выполнения.

Также вы можете поставить отрицательное значение в animation-delay . Отрицательное значение, такое как «0s», означает что анимация начнёт выполняться сразу после её применения, но автоматически перейдёт к абсолютному значению задержки как-будто анимация началась в указанное время в прошлом. Например, если вы установите значение «-2s» в animation-delay, то анимация начнётся мгновенно, но будет выглядеть как-будто началась 2 секунды назад.

CSS animation delay in repeating

I’ve recently discovered how to «properly» use CSS animations (previously I dismissed them as not being able to make complex sequences like you could in JavaScript). So now I’m learning about them.

For this effect, I’m trying to have a gradient «flare» sweep across a progress bar-like element. Similar to the effect on native Windows Vista/7 progress bars.

As you can see, I am trying to have a delay of 4 seconds, followed by the shine sweeping across in 1 second, repeated.

However, it seems that the animation-delay only applies to the first iteration, after which the shine just keeps sweeping across repeatedly.

I «resolved» this issue as follows:

from and 80% are exactly the same, resulting in a «delay» of 80% of the animation length.

This works, but for my next animation, I need the delay to be variable (constant for a particular element, but variable among elements that use the animation), while the animation itself stays exactly the same length.

With the above «solution», I would end up with a slower animation when all I want is a longer delay.

Is it possible to have the animation-delay apply to all iterations, rather than just the first?

8 Answers 8

I had a similar problem and used

Bit irritating that you have to fake your duration to account for ‘delays’ at either end.

minitech is right in that animation-delay specifies the delay before the animation starts and NOT the delay in between iterations. The editors draft of the spec describes it well and there was a discussion of this feature you’re describing here which suggesting this iteration delay feature.

While there may be a workaround in JS, you can fake this iteration delay for the progress bar flare using only CSS.

By declaring the flare div position:absolute and the parent div overflow: hidden , setting the 100% keyframe state greater than the width of the progress bar, and playing around with the cubic-bezier timing function and left offset values, you’re able to emulate an ease-in-out or linear timing with a «delay».


It’d be interesting to write a less/scss mixin to calculate exactly the left offset and timing function to get this exact, but I don’t have the time at the moment to fiddle with it. Would love to see something like that though!

Here’s a demo I threw together to show this off. (I tried to emulate the windows 7 progress bar and fell a bit short, but it demonstrates what I’m talking about)

This is what you should do. It should work in that you have a 1 second animation, then a 4 second delay between iterations:

So I’ve been messing around with this a lot and you can do it without being very hacky. This is the simplest way to put in a delay between animation iterations that’s 1. SUPER EASY and 2. just takes a little logic. Check out this dance animation I’ve made:

I actually came here trying to figure out how to put a delay in the animation, when I realized that you just 1. extend the duration of the animation and shirt the proportion of time for each animation. Beore I had them each lasting .5 seconds for the total duration of 2.5 seconds. Now lets say i wanted to add a delay equal to the total duration, so a 2.5 second delay.

You animation time is 2.5 seconds and delay is 2.5, so you change duration to 5 seconds. However, because you doubled the total duration, you’ll want to halve the animations proportion. Check the final below. This worked perfectly for me.

These are the calcultions you’d probably use to figure out how to change you animation’s duration and the % of each part.

desired_duration = animation_part_duration1 + animation_part_duration2 + . (and so on)

total duration = x + y

animation_part_duration1_actual = animation_part_duration1 * desired_duration / total_duration

CSS Keyframe Animation with Delay Between Iterations

Easily manage projects with monday.com

Say you want an animation to run for 1 second, but then delay for 4 seconds before running again. Seems like that would be easy. Turns out it’s not-so-straightforward, but doable. You need to fake it.

There is an animation-delay property, but that won’t help us here. That delays the start of the animation, but after it’s started it runs continuously.

Solution: Keyframes with No Changes

You’ll need to do a little mental math:

I want the animation to run for 1 second.

plus

I want the animation to delay for 4 seconds in between iterations.

equals

5 total seconds

So when you call the keyframe animation, you use the total seconds:

But now our @keyframes will run for 5 seconds:

So to make our animation run for only 1 second, you’ll need to have the changes happen over 1/5 of the time, or 20%. Verbously, that would look like this:

We can write with less code, since the 0% values are assumed and you can comma separate keyframe steps:

You can get as fancy as you want with the keyframes, you just need to remember to have everything set exactly the same between the final step of your animation and 100%.

Создание плавной последовательной анимации CSS с Sass

Дата публикации: 2020-05-10


От автора: в этой статье я покажу, как создается плавная анимация CSS с помощью Sass цикла for. Эту анимацию можно использовать в вашем приложении, неважно используете вы React, Vue или Angular.

Зачем вообще что-то анимировать?

Анимация – жизненно важный ингредиент при добавлении жизни и характера сайту или приложению. Она может сделать переходы быстрее, даже если без анимации переходы требуют меньше времени. В частности, анимация полезна во время запроса динамических данных с API. На этом я сегодня и остановлюсь.

Пример типов анимации, о которых я сегодня буду вести речь:

Здесь 2 отдельные анимации:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Прелоадер – когда контент запрошен, но еще не загружен.

Загрузка – контент загружен и последовательно появляется.

CSS анимация

Лично я почти всегда использовал CSS свойство transition для анимации. Переходы – отличная и простая вещь, но они ограничены. CSS свойство animation намного мощнее, но и значительно сложнее.

В CSS анимации есть 2 основных части:

Свойство animation

Animation – это сокращение для ряда свойств анимации (animation-name, animation-duration и т.д.). Обычное правило анимации может выглядеть следующим образом:

Свойство animation сверху применяет анимацию pulse к элементу .tile длительностью 1 секунду с бесконечным повторением и функцией смягчения ease. Здесь мало что происходит, но это лучше видно на практике (подробнее ниже).

Правило @keyframes

Правило @keyframes работает по принципу правила @media: внутрь него вложен CSS. В правиле keyframes содержатся правила стилей, которые применяются к элементу по мере прогресса анимации от 0% до 100%.

Создадим пример с правилом @keyframes:

В нашем примере .tile в первой половине анимации будет затемняться и увеличиваться, после чего вернется в исходное состояние. Анимация будет длиться 1 секунду, как указано в свойстве animation для .tile. Между 0% и 100% можно добавить любое количество процентов.

Префиксы браузеров

К сожалению, в продакшене до сих пор нужно использовать вендорные префиксы –moz и –webkit:

Обслуживать такой код быстро надоедает. К счастью, autoprefixer автоматически добавляет вендорные префиксы, и вы можете сосредоточиться на написании CSS. Этот инструмент меняет жизнь, его стоит интегрировать в свой рабочий процесс.

Задержка анимации и nth-child

Я буду много использовать свойство animation-delay вместе с селектором nth-child для анимирования группы элементов во временной последовательности. Задержка анимации позволяет применять ее к разным элементам на разных стартовых точках. Так анимация на группе элементов будет похожа на круги на воде.

Наш конечный CSS:

Создание прелоадер анимации с помощью циклов Sass

Код сверху дает желаемый эффект, но так писать очень неудобно. Придется очень долго вносить любые изменения. Вместо этого можно использовать Sass цикл @for, чтобы сделать код более управляемым.

Sass циклы @for


Пример простого Sass цикла for:

Код сверху компилируется в CSS:

Циклы Sass, nth-child и animation-delay

Мы будем использовать цикл for для обращения к nth-child элементу и добавлять задержку к каждой анимации. По мере прохождения цикла будем увеличивать задержку.

В этом примере я использую 9 плейсхолдер элементов, поэтому я установил цикл на 9, а animation-delay основана на 9. Из-за этого у анимации будет постоянный ритм, а девятый nth-child будет иметь задержку 0.5s (половину анимации pulse).

И т.д. Посмотрите демо:

Анимация хорошая и резкая. Удобно показывать на экране такую анимацию, пока пользователь ждет ответа от API. Что делать, когда контент загрузился? Перейдем к этому.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Анимация элементов после загрузки

После загрузки элементов хорошо бы показать их один за другим, как в последовательности. Воспользуемся тем, что уже знаем, и добавим пару трюков.

Проигрывание анимации только один раз

Эта анимация будет отличаться от прелоадера, так как она должна запуститься один раз (например, когда элемент появляется в DOM). Будем плавно показывать элемент .tile. Нужно убедиться, что он использует стили из первого keyframe нашей анимации сразу после появления (например, он должен начинаться с opacity: 0).

Также нужно, чтобы после анимации (например, opacity: 1) .tile сохранил стили, объявленные в последнем keyframe анимации.

Самое очевидно, что хочется сделать – задать animation-iteration-count в значение 1. Но к сожалению, все сложнее.

Если число итераций равно 1, элемент начинает со стилей по умолчанию, а затем внезапно принимает стили, объявленные в начале анимации (0%). Далее запускается анимация, но после достижения 100% элемент резко возвращается к первичным стилям.

Из-за этого элемент на экране начинает мигать, резко пропадая и возвращаясь к opacity 100%. Вместе с animation-delay проблема становится еще очевиднее.

Режим заполнения анимации

Для решения описанной выше проблемы разработано свойство animation-fill-mode. animation-fill-mode: both заставляет элемент использовать стили из первого keyframe (0%) анимации сразу, как только применяется анимация (даже если есть animation-delay).

После завершения анимации элемент будет использовать стили из последнего keyframe анимации.

Если ничего непонятно, не переживайте. Если хотите подробнее изучить animation-fill-mode, у Codrops есть полезный разбор.

CSS3 Свойство animation-delay

Пример

Анимация начнется с задержкой в две секунды:

animation-delay:2s;
-moz-animation-delay:2s; /* Firefox */
-webkit-animation-delay:2s; /*Safari и Chrome */

Попробуйте сами »
Еще примеры внизу этой страницы.

Поддержка Браузерами

Свойство animation-delay не поддерживается ни одним браузером.

Firefox поддерживает альтернативное свойство -moz-animation-delay.


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

Определение и Использование

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

Значение animation-delay определяется в секундах (s) или миллисекундах (ms).

Совет: Допустимы отрицательные значения, -2s запустит анимацию сразу же, но анимация начнет воспроизведение с момента на две секунды позже от начала.

Значение по умолчанию:
Наследуется: нет
Версия: CSS3
JavaScript синтаксис: объект.style.animationDelay=»2s»

Синтаксис

animation-delay: время;

Значение Описание
время Необязательно. Определяет сколько секунд (миллисекунд) ждать перед запуском анимации. Значение по умолчанию равно 0

Попробуйте сами

Пример

Отрицательные значения, заметьте, что анимация начинается со сдвигом в 2 секунды от начала анимационного цикла:

animation-delay

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

Общие сведения

Значение по умолчанию равное «0s» означает что анимация начнётся сразу как только будет применена к элементу. Положительное значение времени представляет собой смещение, которое определяет насколько долго будет длиться задержка между началом анимации и началом её выполнения.

Также вы можете поставить отрицательное значение в animation-delay . Отрицательное значение, такое как «0s», означает что анимация начнёт выполняться сразу после её применения, но автоматически перейдёт к абсолютному значению задержки как-будто анимация началась в указанное время в прошлом. Например, если вы установите значение «-2s» в animation-delay, то анимация начнётся мгновенно, но будет выглядеть как-будто началась 2 секунды назад.

Набор анимаций animate.css

Набор CSS классов для анимации различных элементов на сайте

Для использования animate.css на сайте нужно просто установить стили и затем подключать к нужным блокам понравившиеся эффекты.

Примеры:

ANIMATE.CSS

Выберите нужный эффект:

Установка:

Просто добавляем на сайт стили animate.css:

Использование:

Чтобы анимировать элемент, нужно добавить к нему класс animated и эффект из таблицы ниже:

Название класса
bounce flash pulse rubberBand
shake headShake swing tada
wobble jello bounceIn bounceInDown
bounceInLeft bounceInRight bounceInUp bounceOut
bounceOutDown bounceOutLeft bounceOutRight bounceOutUp
fadeIn fadeInDown fadeInDownBig fadeInLeft
fadeInLeftBig fadeInRight fadeInRightBig fadeInUp
fadeInUpBig fadeOut fadeOutDown fadeOutDownBig
fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig
fadeOutUp fadeOutUpBig flipInX flipInY
flipOutX flipOutY lightSpeedIn lightSpeedOut
rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft
rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight
rotateOutUpLeft rotateOutUpRight hinge jackInTheBox
rollIn rollOut zoomIn zoomInDown
zoomInLeft zoomInRight zoomInUp zoomOut
zoomOutDown zoomOutLeft zoomOutRight zoomOutUp
slideInDown slideInLeft slideInRight slideInUp
slideOutDown slideOutLeft slideOutRight slideOutUp
heartBeat

Можно также добавить класс infinite для бесконечного цикла, задержку и продолжительность эффекта:

Илон Маск рекомендует:  Что нужно сделать, перед запуском платного вебинара 7 ключей прибыльного вебинара
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL