Как сделать анимацию css

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

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

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

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

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

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

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

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

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

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

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

В то время, как временные характеристики (продолжительность анимации) указываются в стилях для анимируемого элемента, ключевые кадры используют percentage , чтобы определить стадию протекания анимации. 0% означает начало анимации, а 100% её конец. Так как эти значения очень важны, то для них придумали специальные слова: from и to .

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

Примеры

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

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

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

В стиле для элемента <p> с помощью свойства animation-duration указано, что исполнение анимации от начала до конца должно занять 3 с , и что имя для @keyframes (en-US) , описывающей саму анимацию, определено как "slidein".

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавление CSS

Начнём с добавления CSS. Анимация будет длиться 3 секунды, будет называться "slidein", будет повторяться 3 раза, а также значение animation-direction установлено alternate . В ключевых кадрах @keyframes (en-US) установлены такие значения ширины и левого отступа, что элемент будет скользить по экрану.

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

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

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

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

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

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

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

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

  • 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 примеры и готовый код

Для создания анимации применяются свойства CSS transition и animation Рассмотрим их подробно с примерами.

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

Это что касается пользовательских показателей.

Что же касается веб-разработки &#8212; анимация оживляет элементы контента средствами CSS, без привлечения JavaScript, что хорошо для мобильных устройств.

Должен предупредить &#8212; прежде чем браться за анимацию элементов, нужно познакомиться с основами HTML и CSS

Основные компоненты CSS анимации &#8212; свойства transition и animation , и правило @keyframes .

Рассмотрим их по порядку.

transition

Свойство transition применяется для создания простых анимаций, то есть оно создаёт эффект перехода между двумя состояниями элемента.

transition в свою очередь можно разделить на 4 составляющие, каждая из которых влияет на определённый аспект эффекта перехода.

1. transition-property &#8212; определяет свойство, которое будет анимироваться. Например если элемент будет сдвигаться, то это будут свойства top, left, margin и т. п., менять размер, то width или height, менять цвет &#8212; color или background.

2. transition-duration &#8212; продолжительность эффекта перехода. Задаётся в секундах.

3. transition-timing-function &#8212; скорость эффекта перехода. Принимает следующие значения:

ease &#8212; анимация медленно начинается, затем ускоряется и к концу опять замедляется;

ease-in &#8212; медленно начинается, а к концу ускоряется;

ease-out &#8212; быстро начинается, а к концу замедляется;

ease-in-out &#8212; замедление в начале и в конце;

linear &#8212; постоянная скорость;

cubic-bezier &#8212; задаёт все значения в числовом выражении. Например значение ease записывается так: cubic-bezier(0.25,0.1,0.25,1).

4. transition-delay &#8212; задержка начала анимации. Задается в секундах. Например анимация может начаться через определённое время после загрузки страницы.

В сокращённом варианте запись анимации выглядит следующим образом &#8212; в свойстве transition задаются все вышеперечисленные значения по порядку через пробел.

Пример в котором элемент будет перемещаться при наведении на него курсора.

animation и @keyframes

Свойство animation и правило @keyframes применяются для создания анимации любой сложности.

Свойство animation задаёт параметры действия для анимации (длительность анимации, повторение, направление, тип движения, шаги), а в блоке @keyframes задаётся сама анимация по шагам (изменения вида и положения)

Свойство animation включает в себя восемь составляющих:

1. animation-name &#8212; имя анимации. задаётся произвольно. Необходимо для того, чтоб определить анимацию в блоке @keyframes , так как для одного элемента может быть задано несколько анимаций.

2. animation-duration &#8212; длительность анимации, задаётся в секундах (s) или миллисекундах (ms).

3. animation-timing-function &#8212; определяет тип анимации и принимает следующие значения:

linear &#8212; ровное движение;

ease-out &#8212; ускорение в начале;

ease-in &#8212; ускорение в конце;

ease-in-out &#8212; более плавное скольжение, чем ease

cubic-bezier &#8212; задаёт числовые параметры позволяющие реализовать более сложные типы анимации. Инструмент для подбора числовых параметров &#8212; cubic-bezier.com

step-start и step-end &#8212; задаёт пошаговую анимацию (счётчик)

steps &#8212; задаёт количество шагов за которые будет выполнена анимация (секундомер &#8212; steps(60) animation-duration -60s)

4. animation-iteration-count &#8212; задаёт число повторений анимации. Принимает значения:

любое число &#8212; сколько раз повторяется анимация;

infinite &#8212; бесконечное повторение;

5. Animation-direction &#8212; задаёт направление движения. Принимает значения:

normal &#8212; движение слева на право;

reverse &#8212; движение справа на лево;

alternate &#8212; полный цикл туда и обратно;

alternate-reverse &#8212; полный цикл, но начинается и заканчивается с конца;

6. animation-play-state &#8212; задаёт остановку анимации. Принимает значения:

running &#8212; анимация проходит нормально (по умолчанию);

paused &#8212; анимация замирает на первом шаге;

7. animation-delay &#8212; задаёт задержку анимации перед началом воспроизведения. Определяется в секундах (s) и миллисекундах (ms)

8. animation-fill-mode &#8212; позволяет проигрывать анимацию вне указанного времени воспроизведения. Принимает значения:

none &#8212; анимация в работает только в заданном времени воспроизведения, потом возвращается на место.

forwards &#8212; анимация продолжается после окончания времени воспроизведения;

backwards &#8212; анимация начинается до начала воспроизведения;

both &#8212; анимация работает и до начала и после окончания времени воспроизведения;

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

Все свойства можно записать в сокращённом виде, указав в свойстве animation только их значения. Например:

Правило @keyframes &#8212; второй шаг в создании сложной анимации.

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

На практике это выглядит следующим образом: в таблице стилей создаётся селектор @keyframes внутрь которого помещаются селекторы последовательно определяющие состояние элемента.

Например, возьмём элемент <div></div>, зададим ему форму квадрата, фоновый цвет, и сделаем чтобы этот цвет менялся от полной прозрачности, к полной непрозрачности.

@keyframes nev <
from < /* От */
opacity : 0 ; /* полная прозрачность */
>
to < /* До */
opacity : 1 ; /* полная непрозрачность */
>
>

Селекторами from и to задаётся преобразование от одного состояния элемента до другого.

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

Каждому этапу при этом можно задать что-то своё. Например продолжительность, границу, размер и т.п.

50% <
opacity : 0.5;
border-radius : 30% ;
>

100% <
opacity : 1 ;
border-radius : 0 ;
>
>

Пример появления и исчезновения квадрата:

20% <
opacity : 0.2 ;
border-radius : 40% ;
>

50% <
opacity : 0.5 ;
border-radius : 30% ;
>

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

В следующей статье &#171;CSS перемещение, вращение, 3D&#187; подробно разберём свойство transform, очень часто применяющееся в анимациях.

2.22. CSS3-анимация

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

CSS3-анимация может применяться практически для всех html-элементов, а также для псевдоэлементов :before и :after . Список анимируемых свойств приведен на этой странице. При создании анимации не стоит забывать о возможных проблемах с производительностью, так как на изменение некоторых свойств требуется много ресурсов.

Введение в CSS-анимацию

  • Содержание:
Поддержка браузерами

IE: 10.0
Firefox: 16.0, 5.0 -moz-
Chrome: 43.0, 4.0 -webkit-
Safari: 4.0 -webkit-
Opera: 12.1, 12.0 -o-
iOS Safari: 9, 7.1 -webkit-
Opera Mini: &#8212;
Android Browser: 44, 4.1 -webkit-
Chrome for Android: 44

See the Pen square loader by Elena Nazarova (@nazarelen) on CodePen.

1. Ключевые кадры

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

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

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

Ключевые кадры создаются с помощью ключевых слов from и to (эквивалентны значениям 0% и 100% ) или с помощью процентных пунктов, которых можно задавать сколько угодно. Также можно комбинировать ключевые слова и процентные пункты. Если кадры имеют одинаковые свойства и значения, их можно объединить в одно объявление:

Если 0% или 100% кадры не указаны, то браузер пользователя создает их, используя вычисляемые (первоначально заданные) значения анимируемого свойства.

Если несколько правил @keyframes определены с одним и тем же именем, сработает последнее в порядке документа, а все предыдущие проигнорируются.

После объявления правила @keyframes , мы можем ссылаться на него в свойстве animation :

Не рекомендуется анимировать нечисловые значения (за редким исключением), так как результат в браузере может быть непредсказуемым. Также не следует создавать ключевые кадры для значений свойств, не имеющих средней точки, например, для значений свойства color: pink и color: #ffffff , width: auto и width: 100px или border-radius: 0 и border-radius: 50% (в этом случае правильно будет указать border-radius: 0% ).

1.1. Временная функция для ключевых кадров

Правило стиля ключевого кадра также может объявлять временную функцию, которая должна использоваться при перемещении анимации к следующему ключевому кадру.

Пять ключевых кадров указаны для анимации с именем "bounce" . Между первым и вторым ключевым кадром (то есть между 0% и 25% ) используется функция замедления. Между вторым и третьим (то есть между 25% и 50% ) &#8212; функция плавного ускорения. И так далее. Элемент будет перемещаться вверх по странице на 50px , замедляясь по мере того, как он достигнет своей наивысшей точки, а затем ускоряясь, когда он упадет до 100px . Вторая половина анимации ведет себя аналогичным образом, но только перемещает элемент на 25px вверх по странице.

Временная функция, указанная в ключевом кадре to или 100% , игнорируется.

2. Название анимации: свойство animation-name

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

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

Имя анимации чувствительно к регистру, не допускается использование ключевого слова none . Рекомендуется использовать название, отражающее суть анимации, при этом можно использовать одно или несколько слов, перечисленных через дефис — или символ нижнего подчеркивания _ .

Свойство не наследуется.

animation-name
Значения:
none Означает отсутствие анимации. Также используется, чтобы отменить анимацию элемента из группы элементов, для которых задана анимация. Значение по умолчанию.
имя анимации Имя анимации, которое связывает правило @keyframes с селектором.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

3. Продолжительность анимации: свойство animation-duration

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

Свойство не наследуется.

animation-duration
Значения:
время Указывает время, которое анимация занимает для завершения одного цикла. Отрицательные значения недействительны. Если время равно 0s , ключевые кадры анимации не действуют, но сама анимация происходит мгновенно. Значение по умолчанию 0s .

4. Временная функция: свойство animation-timing-function

Свойство animation-timing-function описывает, как будет развиваться анимация между каждой парой ключевых кадров. Во время задержки анимации временные функции не применяются.

Свойство не наследуется.

  • jump-start &#8212; первый шаг происходит при значении 0
  • jump-end &#8212; последний шаг происходит при значении 1
  • jump-none &#8212; все шаги происходят в пределах диапазона (0, 1)
  • jump-both &#8212; первый шаг происходит при значении 0 , последний &#8212; при значении 1
  • start &#8212; ведет себя как jump-start
  • end &#8212; ведет себя как jump-end

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

5. Повтор анимации: свойство animation-iteration-count

Свойство animation-iteration-count указывает, сколько раз проигрывается цикл анимации. Начальное значение 1 означает, что анимация будет воспроизводиться от начала до конца один раз. Это свойство часто используется в сочетании со значением alternate свойства animation-direction , которое заставляет анимацию воспроизводиться в обратном порядке в альтернативных циклах.

Свойство не наследуется.

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

6. Направление анимации: свойство animation-direction

Свойство animation-direction определяет, должна ли анимация воспроизводиться в обратном порядке в некоторых или во всех циклах. Когда анимация воспроизводится в обратном порядке, временные функции также меняются местами. Например, при воспроизведении в обратном порядке функция ease-in будет вести себя как ease-out .

Свойство не наследуется.

animation-direction
Значения:
normal Все повторы анимации воспроизводятся так, как указано. Значение по умолчанию.
reverse Все повторы анимации воспроизводятся в обратном направлении от того, как они были определены.
alternate Каждый нечетный повтор цикла анимации воспроизводятся в нормальном направлении, каждый четный повтор воспроизводится в обратном направлении.
alternate-reverse Каждый нечетный повтор цикла анимации воспроизводятся в обратном направлении, каждый четный повтор воспроизводится в нормальном направлении.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Чтобы определить, является ли повтор цикла анимации четной или нечетной &#8212; количество повторов начинается с 1 .

7. Проигрывание анимации: свойство animation-play-state

Свойство animation-play-state определяет, будет ли анимация запущена или приостановлена. Остановка анимации внутри цикла возможна через использование этого свойства в скрипте JavaScript. Также можно останавливать анимацию при наведении курсора мыши на объект &#8212; состояние :hover .

Свойство не наследуется.

animation-play-state
Значения:
running Анимация выполняется. Значение по умолчанию.
paused Анимация приостанавливается. При перезапуске анимация начинается с того места, где она была остановлена, как если бы «часы», управляющие анимацией, остановились и снова запустились. Если анимация остановлена во время задержки, при повторном воспроизведении время задержки также возобновляется.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

See the Pen EjRagd by Elena Nazarova (@nazarelen) on CodePen.

8. Задержка анимации: свойство animation-delay

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

Свойство не наследуется.

animation-delay
Значения:
время Время определяет длительность задержки между началом анимации (когда анимация применяется к элементу через свойства) и когда она начинает выполняться. Отрицательные значения разрешены, такая задержка начинает анимацию с определенного момента внутри её цикла, т.е. со времени, указанного в задержке. Это позволяет применять анимацию к нескольким элементам со сдвигом фазы, изменяя лишь время задержки. Чтобы анимация началась с середины, нужно задать отрицательную задержку, равную половине времени, установленном в animation-duration . Значение по умолчанию 0s .

9. Состояние элемента до и после воспроизведения анимации: свойство animation-fill-mode

Свойство animation-fill-mode определяет, какие значения применяются анимацией вне времени ее выполнения. Когда анимация завершается, элемент возвращается к своим исходным стилям. По умолчанию анимация не влияет на значения свойств animation-name и animation-delay , когда анимация применяется к элементу. Кроме того, по умолчанию анимация не влияет на значения свойств animation-duration и animation-iteration-count после ее завершения. Свойство animation-fill-mode может переопределить это поведение.

Свойство не наследуется.

animation-fill-mode
Значения:
none Значение по умолчанию. Состояние элемента не меняется до или после воспроизведения анимации.
forwards После того, как анимация заканчивается (как определено значением animation-iteration-count ), анимация будет применять значения свойств к моменту окончания анимации. Если animation-iteration-count больше нуля, применяются значения для конца последней завершенной итерации анимации (а не значения для начала итерации, которое будет следующим). Если значение animation-iteration-count равно нулю, применяемыми значениями будут те, которые начнут первую итерацию (так же, как и в режиме animation-fill-mode: backwards; ).
backwards В течение периода, определенного с помощью animation-delay , анимация будет применять значения свойств, определенные в ключевом кадре, которые начнут первую итерацию анимации. Это либо значения ключевого кадра from (когда animation-direction: normal или animation-direction: alternate ), либо значения ключевого кадра to (когда animation-direction: reverse или animation-direction: alternate ).
both Позволяет оставлять элемент в первом ключевом кадре до начала анимации (игнорируя положительное значение задержки) и задерживать на последнем кадре до конца последней анимации.

10. Краткая запись анимации: свойство animation

Все параметры воспроизведения анимации можно объединить в одном свойстве &#8212; animation , перечислив их через пробел:
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;

Для воспроизведения анимации достаточно указать только два свойства &#8212; animation-name и animation-duration , остальные свойства примут значения по умолчанию. Порядок перечисления свойств не имеет значения, единственное, время выполнения анимации animation-duration обязательно должно стоять перед задержкой animation-delay .

11. Множественные анимации

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

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

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