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


Содержание материала:

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

19 просмотра

2 ответа

37 Репутация автора

На этот вопрос уже есть ответ:

У меня такая анимация:

Я хочу, чтобы эта анимация запускалась каждые 10 секунд. Я пробовал анимацию-задержка, но она не работает. Можете ли вы сказать мне, что я делаю неправильно?

Ответы (2)

плюса

2589 Репутация автора

В CSS нет конструкции, которая справляется с этим, вы должны подделать ее. Удалите задержку, установите продолжительность анимации до 11 секунд, а затем скорректируйте проценты ключевых кадров, чтобы ничего не происходило для финальных 90,9% вашей анимации, разделив оставшиеся 9,1% времени на шаги вашей анимации. ( animation-delay Свойство устанавливает только начальную задержку).

Автор: RwwL Размещён: 13.11.2020 06:32

плюса

78 Репутация автора

Задержка анимации задерживает начало анимации.

Лучше всего «сделать математику» и установить общую продолжительность вашей анимации до 10 секунд, а анимация останется неподвижной в течение оставшихся 9 секунд:

Pause between keyframe animations

got an simple animation with keyframes.

Is it possible to add a pause between this keyframe animation? Like 5 seconds? I know there is a -webkit-animation-delay but this delays only the start of the animation.

P.S. I know its only the webkit prefix. at the end I get it through prefixr.

2 Answers 2

After struggling with this problem myself and the help of Denny Mueller I’ve found that the key is to stop before 100%.

You can use the delay to start with a delay and after the first iteration, the delay will be the amount of time that is left after the animation is finished.

Here is what I used for my implementation:

As you can see, I stop at 94% and the remaining 6% is used to pause on the first frame.

CSS + SVG Бесконечные анимации с задержкой между каждой итерации

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

Это работает, но проблема заключается в том, что это не цикл. Он одушевляет только 1 раз. То, что я хочу, чтобы оживить его каждые 2 секунды.

CSS выглядит следующим образом:

HTML выглядит следующим образом:

Примечание: Хотя этот вопрос отчасти похож на тот , который я учла в комментариях, это немного сложно из — за наличия нескольких анимаций , которые должны быть соединены друг с другом и , следовательно , я добавляющих отдельный ответ , чтобы объяснить это.

Создание любой CSS3 анимации бега бесконечное число раз очень просто. Это может быть достигнуто только установив animation-iteration-count в infinite . Но сделать анимационную повторение каждые [х] секунд является гораздо более сложным , потому что , как объяснено в моем ответе здесь , то animation-delay свойство добавляет задержку только до первой итерации анимации , а не перед каждым и каждой итерации.

Этот ответ объясняет, как добавить задержку между каждой итерации, и поэтому я бы не стал вдаваться в более подробной информации об этом. Но ваш случай является немного более сложным, потому что есть четыре анимации, которые соединены друг с другом, чтобы произвести эффект, и поэтому все они должны быть изменены, чтобы сделать его работу.

Ниже перечислены вещи, которые вы должны сделать, чтобы повторять каждые 2 секунды бесконечно:

  • Добавить animation-iteration-count: infinite на все 4 анимации (или) просто добавить infinite ключевое слово для всех animation обобщающего свойства.
  • Во — первых , рассчитать общее количество времени , для которого выполняется вся анимация (все 4 вместе взятые). В оригинальном фрагменте он был запущен для 1.2S и вам необходима задержка 2s, так что общая продолжительность анимации 3.2s. Это 3.2s должно быть продолжительность для всех 4 — анимации .
  • Анимация .checkmark__circle должна была бежать за .6s и не было никакой задержки. .6s составляет примерно 18,75% от 3.2s и так ключевые кадры анимации должны быть изменены таким образом, что вся анимация завершена на 18,75% отметки , и он остается таким образом до 100% отметки.
  • Анимация .checkmark__check должна была иметь задержку , .8s которая составляет 25% от 3.2s продолжительности. Таким образом , он должен начать с 25% -ной отметки и продолжительность была , .3s которая составляет примерно 9,37% от 3.2s . Таким образом, эта анимация должна начинаться с 25% -ной отметки и будет завершена к тому времени , когда он достигает 34,37% отметки. С этого момента до 100% отметки, он должен держать это состояние. Так, ключевые кадры теперь отличаются с окружностью анимации, нам нужно добавить два различных @keyframes правила.
  • Наполнитель анимация .checkmark имеет .4s длительность и ту же задержку. Таким образом, она должна начинаться с 12,5% -ной отметки, полная на 25% наценку и оставаться таким образом до отметки 100%.
  • Масштаб анимации на .checkmark имеет .3s длительность и .9s задержку. Таким образом, это должно начинаться в 28.125% марки и полной на 37,5% отметки. Это означает среднюю точку (в которой она должна быть transform: scale3d(1.1, 1.1, 1); бы на 32.8125% отметки.

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

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 Animations

Анимация CSS

CSS анимация позволяет анимацию большинства HTML элементов без использования JavaScript или Flash!

Поддержка браузеров для анимаций

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

Номера -WebKit-, -МОЗ-, или -o- укажат первую версию, которая работала с префиксом.

Свойство
@keyframes 43.0
4.0 -webkit-
10.0 16.0
5.0 -moz-
9.0
4.0 -webkit-
30.0
15.0 -webkit-
12.0 -o-
animation 43.0
4.0 -webkit-
10.0 16.0
5.0 -moz-
9.0
4.0 -webkit-
30.0
15.0 -webkit-
12.0 -o-

Что такое анимация CSS?

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

Топ-пост этого месяца:  Qcomment — отзывы и комментарии для ваших еще молодых сайтов, форумов, блогов, интернет-магазинов и

Вы можете изменить любое количество свойств CSS, сколько угодно раз.

Чтобы использовать анимацию CSS, необходимо сначала указать некоторые ключевые кадры для анимации.

Ключевые кадры держат какие стили элемент будет иметь в определенное время.

Правило @keyframes

При указании стилей CSS внутри @keyframes правило, анимация будет постепенно меняться от текущего стиля к новому стилю в определенное время.

Чтобы получить анимацию для работы, необходимо привязать анимацию к элементу.

В следующем примере анимация «example» привязывается к элементу

Пример

/* The element to apply the animation to */
div <
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
>

Примечание: Свойство animation-duration определяет, сколько времени должно занять анимация для завершения. Если свойство animation-duration не задано, анимация не будет выполняться, так как значение по умолчанию равно 0 секундам.

В приведенном выше примере мы указали, когда стиль изменится с помощью ключевых слов «from» и «to» (который представляет 0% (Start) и 100% (полный)).

Также можно использовать процент. С помощью процента можно добавить любое количество изменений стиля.

В следующем примере изменяется цвет фона элемента при завершении анимации на 25%, завершении 50% и повторном завершении анимации на 100%:

Пример

/* The element to apply the animation to */
div <
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
>

В следующем примере изменяется как цвет фона, так и положение элемента

Пример

/* The element to apply the animation to */
div <
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
>

Задержка анимации

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

Следующий пример имеет задержку в 2 секунды перед началом анимации:

Пример

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

В следующем примере анимация начнется, как если бы она уже играла в течение 2 секунд:


Пример

Установить, сколько раз анимация должна выполняться

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

В следующем примере анимация будет выполняться 3 раза, прежде чем она остановится:

Пример

В следующем примере используется значение «Infinite» для того, чтобы анимация продолжалась навсегда:

Пример

Запуск анимации в обратном направлении или альтернативные циклы

Свойство animation-direction указывает, следует ли воспроизвести анимацию вперед, назад или в альтернативных циклах.

Свойство «направление анимации» может иметь следующие значения:

  • normal — Анимация воспроизводится как обычная (вперед). Это значение по умолчанию
  • reverse — Анимация воспроизводится в обратном направлении (назад)
  • alternate — Анимация сначала разыгрывается вперед, затем назад
  • alternate-reverse — Анимация сначала воспроизводится назад, а затем пересылается

В следующем примере анимация будет запущена в обратном направлении (назад):

Пример

В следующем примере используется значение «альтернативный», чтобы сначала запустить анимацию вперед, а затем назад:

Пример

В следующем примере используется значение «альтернативный-обратный» для того, чтобы анимация сначала пробежала назад, а затем пересылает:

Пример

Укажите кривую скорости анимации

Свойство animation-timing-function определяет кривую скорости анимации.

Свойство «анимация-время-функция» может иметь следующие значения:

  • ease — Указывает анимацию с медленным запуском, а затем быстро, а затем закончить медленно (это по умолчанию)
  • linear — Задает анимацию с одинаковой скоростью от начала до конца
  • ease-in — Задает анимацию с медленным запуском
  • ease-out — Задает анимацию с медленным концом
  • ease-in-out — Задает анимацию с медленным началом и концом
  • cubic-bezier(n,n,n,n) — Позволяет определить собственные значения в функции кубической Безье

В следующем примере показаны некоторые из различных кривых скорости, которые могут быть использованы:

Пример

Задание режима заливки для анимации

Анимация CSS не влияет на элемент до воспроизведения первого ключевого кадра или после воспроизведения последнего ключевого кадра. Свойство «анимация-режим заполнения» может переопределить это поведение.

Свойство animation-fill-mode задает стиль для целевого элемента, если анимация не воспроизводится (до начала, после завершения или и того и другого).

Свойство «анимация-режим заполнения» может иметь следующие значения:

  • none — Значение по умолчанию. Анимация не будет применять стили к элементу до или после выполнения
  • forwards — Элемент сохранит значения стиля, заданные последним ключевым кадром (зависит от анимации-направления и анимации-количество итераций)
  • backwards — Элемент получит значения стиля, заданные первым ключевым кадром (в зависимости от направления анимации), и сохранит это во время анимации-период задержки
  • both — Анимация будет следовать правилам как вперед, так и назад, расширяя свойства анимации в обоих направлениях

Следующий пример позволяет элементу

Пример

Следующий пример позволяет элементу

Пример

Следующий пример позволяет элементу

Пример

Анимация Сокращенное свойство

В приведенном ниже примере используются шесть свойств анимации:

Пример

Такой же эффект анимации, как и выше, можно достичь с помощью сокращенного animation Свойства:

Пример

Свойства анимации CSS

В следующей таблице перечислены правила @keyframes и все свойства анимации CSS:

Трюки с CSS-анимациями: мгновенные изменения, отрицательные задержки, анимация transform-origin и другое

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

Быстрое изменение состояния посреди анимации

Обычно анимации используются для того, чтобы плавно менять свойства элементов со временем. Однако изменения могут также быть практически мгновенными. Для этого надо задать два ключевых кадра с очень маленьким интервалом, например в 0.001%:

Вот как я использовал этот приём для имитации мигающей неоновой вывески с помощью прозрачности и свойства text-shadow :

Отрицательные задержки анимации

Положительная задержка откладывает начало анимации на некоторое время. А отрицательная — начинает анимацию немедленно, но не с самого сначала, а со времени, указанного в задержке. Другими словами, начинает анимацию с какого-то момента внутри её цикла. Это позволяет применять анимацию к нескольким элементам со сдвигом фазы, изменяя лишь время задержки. Вот пример использования такой анимации:

Пропорциональные анимации

Я стараюсь делать веб-приложения настолько адаптивными, насколько возможно. Это касается и CSS-анимаций. Хотя сделать абсолютно все анимации адаптивными невозможно, иногда всё же удаётся использовать вместо абсолютных единиц измерения проценты и другие относительные единицы.

Во многих своих анимациях я использую элементы, размеры которых должны быть пропорциональны размерам страницы. Возможно вы думаете, что для этого я использую фиксированную ширину и высоту, но это не так. Можно указать ширину в процентах, нулевую высоту и процентное значение для padding . С помощью padding-bottom высота элементов остаётся пропорциональной ширине:

Если вы откроете следующий пример на Codepen и попробуете изменить размеры окна, вы увидите как это работает. В этом примере также использованы отрицательные задержки анимации.

Изменение transform-origin посреди анимации

Работая над одной из анимаций, я с удивлением обнаружил, что свойство transform-origin не только может меняться посреди анимации, но и само по себе может быть анимировано. В следующем примере это используется для того, чтобы в одной анимации делать четыре разных поворота вместо того, чтобы создавать четыре отдельные анимации:

У этого трюка есть недостаток: вы не можете использовать animation-mode: forwards ; только для части анимации. Это значит, что нам придется передвигать элемент при каждом изменении transform-origin . В этом примере translate используется для имитации эффектов поворота. В более сложных примерах это может оказаться довольно утомительным.

Отрицательный transform-origin

Можно задать отрицательное значение transform-origin, что может быть полезно для создания вращающихся элементов. Вместо того, чтобы отдельно задавать смещение и угол поворота для элемента, как описывает Ли Веру, этого можно добиться проще, используя отрицательные значения transform-origin и дополнительный элемент или псевдоэлемент (или только один элемент, если он не обязан сохранять постоянный угол относительно горизонта). С разными значениями transform-origin можно использовать одну и ту же анимацию для разных элементов:

Магия box-shadow

Для анимации простых форм без контента внутри может пригодиться свойство box-shadow. С его помощью можно создавать несколько границ вокруг одного элемента. На основе этой идеи, используя разные смещения для теней, можно создавать целые наборы анимированных фигур на основе одного элемента HTML. Вот пример анимации, которая выглядит, как шесть вращающихся кружков, которые целиком сделаны с помощью box-shadow :

К сожалению, box-shadow не поддерживает относительные размеры в процентах, так что их труднее сделать адаптивными, чем обычные элементы. Тем не менее, их размеры можно менять вручную или применяя transform:scale(n) для родительского элемента.

Топ-пост этого месяца:  Лучшее время для публикации видео на Youtube
Использование псевдоэлементов

Так же как и box-shadow , псевдоэлементы можно использовать для обогащения внешнего вида элементов HTML. Для них можно использовать отдельные от родительского элемента анимации, они могут иметь отдельные тени — практически как настоящие элементы. Это позволяет делать удивительные вещи:

В этом примере все концентрические окружности вокруг центрального мигающего круга, так же как и два маленьких кружка на внешнем кольце сделаны с помощью box-shadow . Другие два кружка — это тени псевдоэлемента, а кольцо из штрихов — это фон ещё одного псевдоэлемента, заданный в виде inline SVG.

Несколько советов напоследок

Используйте трансформации везде, где только можно

Как показал Пол Айриш и другие, трансформации работают быстрее, чем изменение размеров и положения элементов с помощью свойст top , left , width и height .

С помощью трансформаций легче реализовать адаптивный дизайн, применяя относительные значения для scale (пример).

Отказ от использования трансформаций приводит к появлению ошибок, которые трудно отловить. Например, вот эта анимация отображается в браузере Chrome с некорректными цветами, хотя значения в коде правильные. После перехода на CSS-трансформации проблема решилась сама собой.

z-index может вызывать проблемы

Пожалуй, на решение проблем с z-index я потратил больше времени, чем на любые другие. Реализация z-index разнится от браузера к браузеру. Главное различие — Mozilla не анимирует z-index , и его значение изменяется скачкообразно, тогда браузеры на основе Webkit умеют изменять его плавно.

Также стоит отметить, что если вам нужно, чтобы псевдоэлементы оказались за родительским элементом, псевдоэлемент должен иметь отрицательный z-index , а родительский элемент при этом обязан располагаться в контексте наложения на месте по умолчанию, то есть к нему нельзя применять z-index или любые другие приёмы, которые вырывают его из стандартного положения в контексте.

И последнее. Любой элемент, для которого задана прозрачность, отличная от «1», получает собственный контекст наложения. Подробнее об этом — в статье Филипа Уолтона.

Ищите источники вдохновения

Что-то в реальном мире, интересная веб-страница, необычный видеоэффект, анимированный gif или что угодно ещё — постоянно ищите вещи, которые стоит попробовать реализовать.

Я обнаружил, что если не подглядывать сразу, как именно сделан тот или иной эффект, можно найти уникальный способ и даже превзойти оригинал. Даже если я терплю неудачу, я всегда по крайней мере узнаю что-то новое о языке программирования, который я использую. Часто получается так, что даже не реализованная полностью задумка оказывается довольно эффектной. Иногда наоборот — результат оказывается намного лучше, чем я мог мечтать.

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

Свойство transition-delay

CSS-анимация не обязательно должна начинаться мгновенно после ее инициализации. Вы можете управлять ее началом с помощью свойства transition-delay . Чтобы отложить совершение перехода на определенное время, укажите его в значении свойства:

Данное свойство мало используется при реализации простой интерактивности на сайте, однако оно может быть весьма полезным, если вам предстоит создавать более сложные эффекты. По аналогии с transition-duration можно записать время задержки для каждого свойства, указанного в transition-property (при этом также важно придерживаться порядка перечисления):

Не забывайте о кроссбраузерности — абсолютно все свойства семейства transition требуют использования вендорных префиксов:

Практическое применение

На практике свойство transition-delay весьма часто применяется при создании выпадающих меню, которые раскрываются при наведении курсора. В данном случае оно записывается не только для начального состояния, но и для конечного.


Возможно, вы замечали, что на некоторых сайтах выпадающие подменю исчезают слишком быстро, при этом сложно поймать нужную ссылку и кликнуть по ней. Предотвратить такое поведение как раз и помогает свойство transition-delay , установленное для обычного элемента и для элемента с псевдоклассом :hover . Значения будут отличаться: для обычного состояния свойство transition-delay должно иметь значение больше нуля, а для состояния наведенного курсора оно должно равняться 0. Пример:

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

CSS анимации задержки и Keyframe

У меня есть проблема с задержкой анимации на CSS анимации. У меня есть 3 изображения, и я хочу сделать это слайд-шоу. На рисунках есть изображение 1 изображение 2 занимает 15 секунд, чтобы изменить и изображение 2 с изображением 3 занимает 15 секунд, чтобы изменить и изображение 3 обратно к изображению 1 она занимает 30 секунд, после первого цикла, я хочу, чтобы конец слайд-шоу в изображение-так, что изображение 1 изображение-еще 15 секунд и изображение 2 с изображением 3 еще 15 секунд, а когда изображение 3 нагрузки это не нужно, чтобы вернуться к изображению 1. Я попробовал этот код, но он дает мне задержку 15 секунд на все изображения. Это мой код:

Я хочу, чтобы сделать задержку в моей анимации согласно иллюстрации выше. Любой может помочь мне решить эту проблему? Благодарю вас раньше.

Вот что-то, что дало реальную пищу для размышлений 🙂

Я должен был применить 2 анимации для изменения непрозрачности: xfade-25pct и xfade-50pct . Оба играют только два раза, выведение на короткое время после того, как 25% и 50% от анимации. И дополнительные show анимации , чтобы сделать 3 — ю палку изображения через 2 анимации петель, с необходимым правилом animation-fill-mode: forwards; .

Хитрость непрозрачности заключается в следующем: вы должны разделить анимацию в 4 -х кварталов. Если вы хотите , вы можете изменить общую продолжительность анимации от 60s кратному 4, а также настроить задержки. Третья задержка анимации двойник 2 — го.

Не стейсняйся спросить. Надеюсь, что это помогает.

Я имею в виду, что использование GreenSock лучше, если вы хотите анимацию с конкретным сценарием, как это.

Вот ближе я могу получить с HTML и CSS, мне также нужно дублировать ,
чтобы соответствовать вашему сценарию.

Использование CSS-анимации

На этой странице

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

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

Есть три преимущества CSS-анимации перед традиционными способами:

  1. Простота использования для простых анимаций; Вы можете создать анимацию, не зная JavaScript.
  2. Анимации будут хорошо работать даже при умеренных нагрузках системы. Простые анимации на JavaScript, если они плохо написаны, часто выполняются плохо. Движок может использовать frame-skipping и другие техники, чтобы сохранить производительность на таком высоком уровне .
  3. Позволяет браузеру контролировать последовательность анимации, тем самым оптимизируя производительность и эффективность браузера. Например, уменьшая частоту обновления кадров анимации в непросматриваемых в данный момент вкладках.

Конфигурирование анимации

Чтобы создать CSS-анимацию Вы должны добавить в стиль элемента, который хотите анимировать, свойство animation или его подсвойства. Это позволит Вам настроить ускорение и продолжительность анимации, а также другие детали того, как анимация должна протекать. Это не поможет Вам настроить внешний вид анимации, который настраивается с помощью @keyframes , рассматриваемой далее в Определение последовательности анимации с помощью ключевых кадров.

Свойство animation имеет следующие подсвойства:

animation-name Определяет имя @keyframes , настраивающего кадры анимации. animation-duration Определяет время, в течение которого должен пройти один цикл анимации. .»> animation-timing-function Настраивает ускорение анимации. animation-delay Настраивает задержку между временем загрузки элемента и временем начала анимации . animation-iteration-count Определяет количество повторений анимации; Вы можете использовать значение infinite для бесконечного повторения анимации. animation-direction Дает возможность при каждом повторе анимации идти по альтернативному пути, либо сбросить все значения и повторить анимацию. animation-fill-mode Настраивает значения, используемые анимацией, до и после исполнения. animation-play-state Позволяет приостановить и возобновить анимацию.

Определение последовательности анимации с помощью ключевых кадров

После того, как вы настроили временные свойства (продолжительность, ускорение) анимации , вы должны определить внешний вид анимации . Это делается с помощью двух и более ключевых кадров после @keyframes . Каждый кадр описывает, как должен выглядеть анимированный элемент в текущий момент.

Топ-пост этого месяца:  Как купить группу ВКонтакте с подписчиками и гарантиями

В то время, как временные характеристики (продолжительность анимации) указываются в стилях для анимируемого элемента, ключевые кадры используют представляет значение в процентах. Оно часто используется, чтобы определить размер относительно родительского элемента. Проценты используются в различных свойствах, таких как width, height, margin, padding, и font-size.»> percentage , чтобы определить стадию протекания анимации. 0% означает начало анимации, а 100% ее конец. Так как эти значения очень важны, то для них придумали специальные слова: from и to .

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

Примеры

Скольжение текста

Этот простой пример анимирует скольжение текста в элементе представляет собой абзац.»>

от правого края окна браузера.

Обратите внимание на то, что анимация может сделать страницу шире, чем окно браузера. Этого можно избежать, поместив элемент, который будет анимироваться, в контейнер и установив ему свойство overflow : hidden .

с помощью свойства animation-duration указано, что исполнение анимации от начала до конца должно занять 3 с , и что имя для @keyframes , описывающей саму анимацию, определено как «slidein».

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

Kлючевые кадры определяются с помощью правила @keyframes . В данном случае мы имеем только два ключевых кадра. Первый при 0% анимации ( from ). Здесь мы придаем элементу левый отступ в 100% и ширину в 300% (в три раза больше ширины родительского элемента). Это становится причиной того, что при первом кадре анимации заголовок представляет собой абзац.»>

находится за пределами правого края окна браузера .

Второй ключевой кадр (to) определяет конец анимации, т.е (100%). Левый отступ устанавливается равным 0, а ширина 100%. Все выглядит так, будто заголовок представляет собой абзац.»>

приплывает к левому краю окна браузера.

(Обновите страницу, чтобы увидеть анимацию, или щелкните по кнопке CodePen, чтобы воспроизвести ее в окне CodePen)

Добавление других ключевыч кадров

Давайте добавим другие ключевые кадры в предыдущий пример. Скажем, мы хотим чтобы размер шрифта заголовка временно увеличивался по мере продвижения влево, а потом возращался к первоначальному значению . Это легко реализовать с помощью следующего ключевого кадра:

Это говорит браузеру о том, что при 75% выполнения анимации, шрифт должен быть 300%, а ширина 150%.

(Обновите страницу, чтобы увидеть анимацию, или щелкните по кнопке CodePen, чтобы воспроизвести ее в окне CodePen)

Настройка повторения

Чтобы настроить повторение, нужно добавить свойство animation-iteration-count и задать ему значение, равное нужному количеству повторений анимаций . В данном случае давайте установим значение infinite для бесконечного повторения:

Движение текста вправо и влево

Итак, мы настроили повторение, но получили нечто странное: текст при каждом повторении снова «запрыгивает» за край окна браузера. То, чего мы хотим, так это чтобы текст двигался влево и вправо. Этого легко достичь с помощью установки свойству animation-direction значения alternate :

Использование шорткодов

Шорткод animation полезен для экономии места в коде. Например, правило, которое мы используем в этой статье:

можно заменить на:

Внимание: подробнее об этом на странице раздела animation

Установка нескольких значений свойствам анимации

CSS cвойство анимации может иметь несколько значений, разделенных запятыми. Это используется, чтобы указать несколько значений анимации в одном правиле и установить разную продолжительность, число повторений и т.д., для различных анимаций. Рассмотрим несколько примеров, чтобы увидеть разницу.

В первом примере у свойства имени анимации установлены три значения, у свойств продолжительности и количества повторений — по одному. В этом случае у всех трех анимаций одинаковая продолжительность и число повторений:

Во втором примере установлены три значения для каждого из свойств. В этом случае каждая анимация выполняется с соответствующими по порядку значениями в каждом свойстве, так, например, fadeInOut имеет продолжительность 2.5 с и количество повторений 2, и т.д.

В третьем примере определены три значения имени анимации, но два значения продолжительности и количества повторений. В случае, когда количества значений недостаточно для каждой анимации, значения берутся циклически от начала до конца. Например, у fadeInOut длительность будет 2.5s, а moveLeft300px — 5s. Значения продолжительности закончились, теперь они берутся сначала — bounce получит продолжительность 2.5s. Значение количества повторений (а также другие указанные свойства) будет определено таким же образом.

Использование событий анимации

Вы можете получить дополнительный контроль над анимацией, а также полезную информацию о ней, с помощью событий анимации. Эти события, представленные объектом AnimationEvent , можно использовать, чтобы определить, когда начинается и заканчивается анимация или начинается новая итерация. Каждое событие содержит момент времени, когда оно произошло, а также имя анимации, которая вызвала событие.

Мы будем модифицировать текст, чтобы выводить некоторую информацию о каждом событии анимации. Так мы сможем увидеть, как она работает.

Добавление CSS

Начнем с добавления CSS. Анимация будет длиться 3 секунды, будет называться «sl > animation-direction установлено alternate . В ключевых кадрах @keyframes установлены такие значения ширины и левого отступа, что элемент будет скользить по экрану.

Добавление обработчика события анимации

Будем использовать JavaScript для отслеживания всех трех возможных событий анимации. Следующий код конфигурирует обработчик; мы вызываем его при первой загрузке документа.

Это довольно стандартный код; Вы можете получить дополнительную информацию в документации element.addEventListener() . Последнее, что делает этот код — это установка класса «slidein» для анимируемого элемента; мы делаем это, чтобы запустить анимацию.

Почему? Потому что в нашем случае событие animationstart происходит как только анимация стартует, и это происходит раньше, чем исполняется наш сценарий. Так мы сможем контролировать начало анимации самостоятельно посредством вставки класса «slidein» для анимируемого элемента.

Регистрация событий

События будут передаваться функции listener() , показанной ниже.

Этот код также очень прост. Этот код следит за event.type , чтобы определить тип события, и добавляет элемент , чтобы залогировать произошедшее событие.

Вывод, когда анимация закончится, будет выглядеть примерно следующим образом:

  • Started: elapsed time is 0
  • New loop started at time 3.01200008392334
  • New loop started at time 6.00600004196167
  • Ended: elapsed time is 9.234000205993652

Обратите внимание, что время, указанное в выводе, и время, которое мы указали в стилях, не совпадают. Также обратите внимание, что после окончания итерации не посылается событие animationiteration ; вместо него посылается событие animationend .

Ради полноты картины приведем код разметки HTML. В разметке имеется тег ul, в который и выводится вся информация:

Как добавить задержку между итерациями бесконечно повторяющейся анимации в CSS

Что я могу изменить, чтобы они все прекрасно работали?

Создан 01 ноя. 17 2020-11-01 19:12:39 Marc Fletcher

1 ответ

Вам просто нужно увеличить длину анимации, так что не начать с самого начала до последней отделки

Создан 01 ноя. 17 2020-11-01 19:16:19 abney317

К сожалению следует уточнить, что ни в коем случае текст не будет перекрываться/смешаться друг с другом. При этом 15 секунд заставляет текст кровоточить друг в друга, превращая переход. – Marc Fletcher 01 ноя. 17 2020-11-01 19:49:42

А я вижу. Проблема в том, что у вас нет задержки на первом прогоне, поэтому он сразу начинается сразу, когда он возвращается назад. Вам нужно, чтобы первый пробел сразу был видимым или вы могли просто применить анимацию к этому? – abney317 01 ноя. 17 2020-11-01 20:05:26

Было бы предпочтительно, чтобы это было сразу видно. Есть ли обходной путь? – Marc Fletcher 01 ноя. 17 2020-11-01 20:11:09

Насколько вы строго настроены на текущую анимацию затухания? Вы можете установить его на 15 секунд и немного настроить анимацию, чтобы они не перекрывались никогда. – abney317 01 ноя. 17 2020-11-01 20:24:40

Тройка как не использовать выцветание? – Marc Fletcher 01 ноя. 17 2020-11-01 20:52:19

Нет. Я имею в виду, если вы сделаете что-то вроде установки длины анимации до 15 секунд, а затем, возможно, установите непрозрачность 10% на 0, после чего они больше не будут перекрываться. – abney317 01 ноя. 17 2020-11-01 20:55:18

Это было! Благодаря! – Marc Fletcher 01 ноя. 17 2020-11-01 21:02:38

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