Типы анимации в компьютерной графике. Состояние элемента до и после воспроизведения анимации: свойство animation-fill-mode. D компьютерная анимация

Это довольно провокационный вопрос, волнующий многих людей. Все началось с того момента, когда такой гигантский анимационный монстр, как «Дисней» (основоположник стиля) сообщил о закрытии своего 2Д отделения. Всех взволновал вопрос, что же это значит для будущего классической анимации»? Означает ли это то, что больше не будет классической анимации?

Я все чаще и чаще сталкиваюсь с молодыми специалистами, которые предпочитают 2Д анимацию, но работают именно в 3Д. Когда я их спрашиваю почему, то ответ по большей части один и тот же - «Но ведь у 2Д анимации нет будущего. Классическая анимация умерла!» Но правда ли это? Действительно ли умерла 2Д анимация? Давайте разберемся.

Для начала «2Д анимация» и «классическая анимация»- это два абсолютно разных понятия. Одно из них означает направление, вид анимации, «2Д» - плоская, двумерная анимация. А другое понятие означает технику. Классическая техника - работа на анимационном столе с использованием 12 принципов Диснея. Эти два понятия ни в коем случае нельзя путать.

«Классическая анимация», расшифровка этого понятия в самом названии - «КЛАССИЧЕСКАЯ». Многие годы анимация делалась на анимационных столах, с использованием все тех же неизменных 12 принципов, которые были придуманы уже давно. Это классика, как и другие хорошие классические вещи в нашем мире, как музыка Моцарта например. Проходит их время, но мы все равно их ценим и идем дальше, используя накопленный опыт. Но нельзя говорить о том, что классическая анимация умерла. Она всего лишь претерпела изменения, идя в ногу со временем и адаптируясь к требованиям нового поколения зрителей.

Сейчас уже сложно говорить об одном определенном виде анимации. Границы стерлись. Редко в самом начале проекта студия знает в 2Д или 3Д она собирается делать проект. Сначала проводится тестирование - в в каком направлении анимации идея будет понятнее всего, легче всего для создания и конечно же, быстрее всего. И уже потом, исходя из результатов многочисленных тестов, иногда даже многолетних, решается, какую технику будут использовать.

• Tutorial

В этой статье поговорим о 2D анимациях в Unity. Я расскажу о своем опыте работы с родными анимациями в юнити, о том, насколько тайм-лайны похожи на флэшевские, об управлении анимациями, event"ах, вложенности, и о том, как художник справляется с анимированием.

Для начала, немного теории.

В Unity есть две сущности:

1. Анимация (то, что отображается в окно «Animation»)
2. Mechanim дерево анимаций (то, что отображается в окне «Animator»).

Ниже я немного расскажу, что это такое и как нам может приходиться (или не пригодиться).

Animation

Кстати, несмотря на то, что у каждой анимации есть FPS (поле «sample»), сами анимации к FPS не привязаны. Они привязаны ко времени. Т.е. если вы делаете анимацию с 5 FPS, где у вас объект двигается из точки А в точку Б с помощью задания двух ключевых кадров в начале и в конце, то в игре этот объект не будет двигаться ступеньками с 5 FPS. Анимация рассчитывается каждый кадр игры, а FPS внутри анимации сделан лишь для вашего удобства, чтобы вам не частить кадры.

Animator

Кроме того, вы можете создавать дерево этих анимаций с морфингом между ними. Т.е. если у вас есть персонаж, анимированный перекладками (когда каждая часть тела - отдельный спрайтик, который вы вращаете/двигаете), то вполне можно сделать анимацию ног отдельно, анимацию рук - отдельно. А потом (с помощью мышки) настроить условие, что от скорости движения вашего объекта, mechanim аниматор будет включать либо анимацю ног «ходьба», либо «бег». А стрелять ваш персонаж будет отдельной анимацией, которая никак не связана со скоростью переставления ног.

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

Начинаем шаманить.

Мой конкретный случай - у нас есть сугроб снега, в котором сидит заяц. Сугроб сам по себе шевелится:

1. сугроб, шевелясь, двигается влево
2. из сугроба выглядывает заяц (анимация пульсации останавливается):

3. сугроб двигается вправо

В принципе, ничего сложного. Анимируем пульсацию сугроба внутри объекта, внешним аниматором двигаем его влево, потом скрываем, вместо него показываем покадровую анимацию выглядывающего зайца, потом обратно. И все это на одном таймлайне (кроме «внутренней» анимации сугроба).

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

Хотелось бы большей гибкости.

Есть другой вариант. Мы анимируем выглядывание зайца в отдельном объекте (так же, как мы сделали это с шевелением сугроба), а в основном тайм-лайне просто включаем этот объект (active) в нужный момент и анимация начинается.

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

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

То есть сделать так:

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

Что нам для этого понадобится? Unity позволяет добавлять на анимацию вызов кастомных юзер event"ов. Это именно то, что нам нужно! Осталось только правильно все написать.

Первое, что нам понадобится, это написать простой компонент (в нашем случае он называется GJAnim) и повесить его на тот же объект, на котором висит наш аниматор. Именно методы этого компонента мы сможем вызывать событиями с таймлайна.

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

Public void Pause() { _animator.speed = 0; } protected void Resume() { _animator.speed = 1; }
Где _animator - это переменная, в которой мы закешировали компонент " Animator ":

Animator = GetComponent();

Если вы обратили внимание на скрин выше, над ключевым кадром, который я пометил цифрой «2» стоит небольшая вертикальная черта. Именно за ней скрывается вызов события (метода) «Pause»:

Стоит отметить, что в такие события можно даже передавать параметр. Поддерживаются string, float и объект из библиотеки (не со сцены).

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

Public void ResumeParent() { Transform pr = transform; while (true) { pr = pr.parent; if (pr == null) { Debug.LogWarning("No GJAnim found in parents!"); return; } GJAnim a = pr.gameObject.GetComponent(); if (a != null) { a.Resume(); return; } } }

Этот метод ищет среди родителей компонент " GJAnim " и снимает его с паузы. Соответственно, ставим это событие на окончание анимации нашего кролика:

Profit!

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

О багах Unity и сумасшествии.

У нас была родительская (главная) анимация, которая показывала один объект (скрывала все остальные), вставала на паузу, в это время в этом объекте начинала проигрываться своя (вложенная) анимация, которая снимала родителя с паузы по окончании. Далее - показывался следующий объект и т.п.

Так вот, мы заметили, что кадры иногда проскакивают.

Долго-долго дебажили, много писали в лог… и вот что выяснили:

По видимому, в юнити есть какой-то стэк кадров/событий анимаций. И когда компьютер (редактор unity) подтормаживает, он может положить в этот стек сразу два кадра, чтобы в следующую итерацию выполнить их оба.

Это влечет за собой чуть ли не полностью неисправимый фейл. Мы ловили ситуацию, когда аниматор выполнял все действия с кадром и вставал на паузу (это ок), а потом в этот же кадр выполнял еще и следующий кадр. То есть за один кадр рассчитывал сразу два кадра анимации. И то, что в 1-м кадре было событие, ставящее скорость анимации в 0, не мешало ему рассчитать еще и следующий кадр, который, по видимому, уже лежал в стеке.

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

На данный момент проблема выглядит неисправимой. Как мы справились? Поставили FPS таких анимаций в 20. Видимо, на таком FPS"е случая, когда юнити хочет просчитать два кадра за одну итерацию - не случается.

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

Что с этим делать - не ясно.

Компас продакшн с 2005 года осуществляет создание 2д-анимации, рекламных роликов и корпоративных фильмов. Вы можете заказать рекламное видео с 2d анимацией в Компас продакшн.

— это технология создания видео, при которой анимируются двухмерные графические изображения. Слово образовано от аббревиатуры 2D, 2-D (от англ. 2-dimensional — двумерная графика, двумерное пространство) и анимация (от фр. animation - оживление, одушевление).

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

2d анимация в зависимости от типа компьютерной графики может быть:

Векторная 2d анимация – это видео, которое создано при помощи геометрических объектов таких, как линии, кривые и геометрические фигуры (треугольник, круг, многоугольник и т.д.).

Растровая 2d анимация — это видео, которое состоит из пикселей. В отличии от векторной графики при увеличении изображения растровая 2d анимация теряет свое качество.

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

Дудл видео – это анимированное рисованное видео, где информация подается с помощью рисующей карандашом или маркером руки с голосом за кадром. – это особая техника создания графического ролика, определенный стиль, который хорошо подходит для объяснения различных бизнес-процессов и устройств.

Преимущества рекламы с 2d анимацией

2. Ролики с 2d анимацией нравится аудитории, и поэтому ею хочется делиться со знакомыми и друзьями.

3. Цена 2d анимации в разы ниже, чем стоимость постановочной или комбинированной рекламы, в создании которой присутствует этап .

Стоит отметить, что 2д-анимация сдает свои позиции перед реалистичностью 3d-графики, которая все больше ее вытесняет с рынка, как в сфере создания рекламных роликов, так и в кинематографе.

Почему клиенты выбирают рекламу с 2d анимацией?

Кроме этого, разработка рекламного ролика в 2d анимации — отличный способ рассказать ярко и интересно о чем-то скучном и однообразном. Также при помощи графической 2d анимации можно разъяснить аудитории то, что является изначально сложным для восприятия. Например, если дело касается интернет проектов, банковских сервисов, финансовых площадок, учебных программ и т.д. Именно поэтому 2d графика широко используется при создании обучающих видео, видео презентаций, презентационных и корпоративных фильмов.

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

Если вы хотите заказать 2d-анимацию в Компас продакшн, предлагаем вам посмотреть плейлист с примерами роликов с 2d анимацией, созданных специалистами нашей студии:

Стоимость 2d анимации в рекламе

Стоит отметить, что при создании рекламного ролика в 2d анимации полностью отсутствует этап продакшна, поэтому его цена в любом случае будет ниже, чем за съемочный или комбинированный ролик, где присутствуют и съемки, и графика. Создание 2D анимации обойдется в среднем от 50 000 до 300 000 рублей.

Заказать 2d анимацию

Для того чтобы заказать 2д анимацию, надо довериться профессионалам и обратиться в опытную студию – Компас продакшн. Наши специалисты расскажут, как создать 2d анимацию, и подготовят отличное предложение. Заказать рекламный ролик с 2d анимацией можно позвонив к нам в офис по телефону или отправив письмо на e-mail.

Создание 2D-мультфильма в KINESKO это:

Цена 2D-анимации зависит от таких факторов

1. Хронометраж ролика.
2. Сложность анимации. Чем детальней прорисовка, тем выше цена 2D-анимации.
3. Наличие дополнительных услуг (озвучка, продвижение и т.д.).

Этапы создания 2D-анимации

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

2. Следующий этап изготовления 2d-анимации - разработка дизайна персонажей . Она начинается с нарисованного художником наброска, который позже дорабатывают и упрощают. Художник придумывает внешний вид персонажей, их эмоции и даже произносимые ими звуки.

3. Затем мы приступаем к созданию раскадровки , предварительной визуализации ролика. Она позволяет аниматорам понять, как должен выглядеть итоговый ролик (ракурс, вид и поведение персонажей, и т.д.).

4. Раскадровку используют, чтобы создать ключевые кадры ролика . После их прорисовки начинается работа над созданием промежуточных кадров (фазовка). Параллельно рисуются задние планы .

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

С услугой 2D-анимации заказывают

Почему вам нужно сделать 2D-анимацию

1. В 3D-анимации есть множество ограничений при построении кадра или сцены. Создать 2D-анимацию куда проще. 2D-персонажи более пластичны и обладают лучшей мимикой , которая способствует их запоминаемости. Трехмерные модели созданы иначе, каждое их движение рассчитано математическими формулами.

2. В 2D-анимации применяют больше визуальных эффектов, чем в 3D, что сильно ускоряет работу .

3. Анимация персонажа в 2D-роликах стоит дешевле , чем в объемных.

4. В 2D-анимации информацией можно наполнить весь экран. Тогда как в 3D-роликах ориентиры в п ространстве отбирают часть экран и сокращают число рабочих пикселей.

5. У объемных персонажей волосы могут «утонуть» в текстуре головы, а уши - пройти сквозь шляпу. С 2d-анимированными персонажами таких проблем не возникает.

1. «Резиновый» герой. Тела нарисованных персонажей часто сжимаются и растягиваются. И все же объем тела должен оставаться одинаковым.

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

3. Сценичность. Позы и мимика анимационных персонажей должны быть просты и выразительны.

4. Бесконечное движение. Даже если двухмерный персонаж статичен, второстепенные элементы должны быть в перманентном движении.

5. Движение по дугам. Живые существа всегда движутся по дугообразной траектории. Хотя резкие движения могут показаться прямыми, это обманчивое впечатление.

6. Карикатурность. Анимация и реализм - трудно совместимые вещи. Счастливый персонаж должен сиять, словно солнце, а сердитый - выглядеть, как готовый взорваться котел.

7. Привлекательность персонажей. Привлекательным может быть даже живущий в болоте страшный тролль. Если же персонаж будет казаться скучным, таковым будет казаться и весь фильм.

Как сделать анимационного персонажа миловидным?

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

Эволюция создания двухмерной анимации

1. «Пароход Вилли» (1928) - это первый звуковой мультфильм. Также это третий мультфильм, в котором появляется Микки Маус.

2. «Белоснежка и семь гномов» (1937) стала первым полнометражным цветным мультфильмом. За передовые достижения она даже получила Оскара.

3. «Мэри Поппинс» (1964) не является первым фильмом, где реальная картинка совмещена с анимацией. Тем не менее, это главный пример использования подобной технологии, без которого не было бы «Кто подставил кролика Роджера» и других известных фильмов.

4. «Приключения кота Фрица» (1962) - это первый мультфильм, получивший возрастной рейтинг X. Из-за сцен эротики и насилия его никогда не показывали по телевизору, однако он стал отправной точкой в истории взрослой анимации.

5. «Акира» (1988) вышла уже после того, как Хаяо Миядзаки основал свою знаменитую студию «Гибли». Но именно она послужила толчком для популяризации аниме в Америке и остальном мире, открыв дорогу фильмам вышеупомянутого Миядзаки, «Евангелиону» и многим другим.

6. «Медвежонок Винни и его друзья» стал последним рисованным мультфильмом студии Disney, ознаменовав собой конец целой эпохи.

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: —
Android Browser: 44, 4.1 -webkit-
Chrome for Android: 44

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

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

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

@keyframes имя анимации { список правил }

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

@keyframes shadow { from {text-shadow: 0 0 3px black;} 50% {text-shadow: 0 0 30px black;} to {text-shadow: 0 0 3px black;} }

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

@keyframes move { from, to { top: 0; left: 0; } 25%, 75% {top: 100%;} 50% {top: 50%;} }

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

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

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

H1 { font-size: 3.5em; color: darkmagenta; animation: shadow 2s infinite ease-in-out; }

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

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

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

Пример

@keyframes bounce { from { top: 100px; animation-timing-function: ease-out; } 25% { top: 50px; animation-timing-function: ease-in; } 50% { top: 100px; animation-timing-function: ease-out; } 75% { top: 75px; animation-timing-function: ease-in; } to { top: 100px; } }

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

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

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

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

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

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

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

Синтаксис

Animation-name: none; animation-name: test-01; animation-name: -sliding; animation-name: moving-vertically; animation-name: test2; animation-name: test3, move4; animation-name: initial; animation-name: inherit;

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

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

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

Синтаксис

Animation-duration: .5s; animation-duration: 200ms; animation-duration: 2s, 10s; animation-duration: 15s, 30s, 200ms;

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

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

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

Синтаксис

Animation-timing-function: ease; animation-timing-function: ease-in; animation-timing-function: ease-out; animation-timing-function: ease-in-out; animation-timing-function: linear; animation-timing-function: step-start; animation-timing-function: step-end; animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); animation-timing-function: steps(4, end); animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1); animation-timing-function: initial; animation-timing-function: inherit;

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

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

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

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

Синтаксис

Animation-iteration-count: infinite; animation-iteration-count: 3; animation-iteration-count: 2.5; animation-iteration-count: 2, 0, infinite;

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

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

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

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

Синтаксис

Animation-direction: normal; animation-direction: reverse; animation-direction: alternate; animation-direction: alternate-reverse; animation-direction: normal, reverse; animation-direction: alternate, reverse, normal; animation-direction: initial; animation-direction: inherit;

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

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

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

Синтаксис

Animation-play-state: running; animation-play-state: paused; animation-play-state: paused, running, running; animation-play-state: initial; animation-play-state: inherit;

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

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

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

Синтаксис

Animation-delay: 5s; animation-delay: 3s, 10ms;

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

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

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

Синтаксис

Animation-fill-mode: none; animation-fill-mode: forwards; animation-fill-mode: backwards; animation-fill-mode: both; animation-fill-mode: none, backwards; animation-fill-mode: both, forwards, none;

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

Все параметры воспроизведения анимации можно объединить в одном свойстве — animation , перечислив их через пробел:

Animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;

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

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

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

Div {animation: shadow 1s ease-in-out 0.5s alternate, move 5s linear 2s;}