CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation’s style, as well as possible intermediate waypoints.

There are three key advantages to CSS animations over traditional script-driven animation techniques:

1. They’re easy to use for simple animations; you can create them without even having to know JavaScript.
2. The animations run well, even under moderate system load. Simple animations can often perform poorly in JavaScript (unless they’re well made). The rendering engine can use frame-skipping and other techniques to keep the performance as smooth as possible.
3. Letting the browser control the animation sequence lets the browser optimize performance and efficiency by, for example, reducing the update frequency of animations running in tabs that aren"t currently visible.

Configuring the animation

To create a CSS animation sequence, you style the element you want to animate with the animation property or its sub-properties. This lets you configure the timing, duration, and other details of how the animation sequence should progress. This does not configure the actual appearance of the animation, which is done using the @keyframes at-rule as described in below.

animation-name Specifies the name of the @keyframes at-rule describing the animation’s keyframes. animation-duration Configures the length of time that an animation should take to complete one cycle. animation-timing-function Configures the timing of the animation; that is, how the animation transitions through keyframes, by establishing acceleration curves. animation-delay Configures the delay between the time the element is loaded and the beginning of the animation sequence. animation-iteration-count Configures the number of times the animation should repeat; you can specify infinite to repeat the animation indefinitely. animation-direction Configures whether or not the animation should alternate direction on each run through the sequence or reset to the start point and repeat itself. animation-fill-mode Configures what values are applied by the animation before and after it is executing. animation-play-state Lets you pause and resume the animation sequence.

Defining the animation sequence using keyframes

Once you’ve configured the animation’s timing, you need to define the appearance of the animation. This is done by establishing two or more keyframes using the @keyframes at-rule. Each keyframe describes how the animated element should render at a given time during the animation sequence.

Since the timing of the animation is defined in the CSS style that configures the animation, keyframes use a CSS data type represents a percentage value. It is often used to define a size as relative to an element" s parent object. numerous properties can use percentages such as width height margin padding and font-size.> to indicate the time during the animation sequence at which they take place. 0% indicates the first moment of the animation sequence, while 100% indicates the final state of the animation. Because these two times are so important, they have special aliases: from and to . Both are optional. If from / 0% or to / 100% is not specified, the browser starts or finishes the animation using the computed values of all attributes.

You can optionally include additional keyframes that describe intermediate steps between the start and end of the animation.

Examples

Note: Some older browsers (pre-2017) may need prefixes; the live examples you can click to see in your browser include the -webkit prefixed syntax.

Making text slide across the browser window

And the rest of the code:

@keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } }

The Caterpillar and Alice looked at each other for some time in silence: at last the Caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice.

Using animation shorthand

The animation shorthand is useful for saving space. As an example, the rule we’ve been using through this article:

P { animation-duration: 3s; animation-name: slidein; animation-iteration-count: infinite; animation-direction: alternate; }

Could be replaced by

P { animation: 3s infinite alternate slidein; }

Setting multiple animation property values

The CSS animation longhand values can accept multiple values, separated by commas - this feature can be used when you want to apply multiple animations in a single rule, and set separate durations, iteration counts, etc. for the different animations. Let’s look at some quick examples to explain the different permutations:

In this first example, we have three animation names set, but only one duration and iteration count. In this case all three animations are given the same duration and iteration count:

Animation-name: fadeInOut, moveLeft300px, bounce; animation-duration: 3s; animation-iteration-count: 1;

In this second example, we have three values set on all three properties. In this case each animation is run with the corresponding values in the same position on each property, so for example fadeInOut has a duration of 2.5s and an iteration count of 2, etc.

Animation-name: fadeInOut, moveLeft300px, bounce; animation-duration: 2.5s, 5s, 1s; animation-iteration-count: 2, 1, 5;

In this third case, there are three animations specified, but only two durations and iteration counts. In such cases where there are not enough values to give a separate value to each animation, the values cycle from start to finish. So for example, fadeInOut gets a duration of 2.5s and moveLeft300px gets a duration of 5s. We’ve now got to the end of the available duration values, so we start from the beginning again - bounce therefore gets a duration of 2.5s. The iteration counts (and any other property values you specify) will be assigned in the same way.

Animation-name: fadeInOut, moveLeft300px, bounce; animation-duration: 2.5s, 5s; animation-iteration-count: 2, 1;

Using animation events

You can get additional control over animations - as well as useful information about them - by making use of animation events. These events, represented by the AnimationEvent object, can be used to detect when animations start, finish, and begin a new iteration. Each event includes the time at which it occurred as well as the name of the animation that triggered the event.

We"ll modify the sliding text example to output some information about each animation event when it occurs, so we can get a look at how they work.

Adding the CSS

We start with creating the CSS for the animation. This animation will last for 3 seconds, be called “slidein”, repeat 3 times, and alternate direction each time. In the @keyframes , the width and margin-left are manipulated to make the element slide across the screen.

Slidein { animation-duration: 3s; animation-name: slidein; animation-iteration-count: 3; animation-direction: alternate; } @keyframes slidein { from { margin-left:100%; width:300% } to { margin-left:0%; width:100%; } }

Adding the animation event listeners

We’ll use JavaScript code to listen for all three possible animation events. This code configures our event listeners; we call it when the document is first loaded in order to set things up.

Var element = document.getElementById("watchme"); element.addEventListener("animationstart", listener, false); element.addEventListener("animationend", listener, false); element.addEventListener("animationiteration", listener, false); element.className = "slidein";

This is pretty standard code; you can get details on how it works in the documentation for eventTarget.addEventListener() . The last thing this code does is set the class on the element we"ll be animating to “slidein”; we do this to start the animation.

Why? Because the animationstart event fires as soon as the animation starts, and in our case, that happens before our code runs. So we’ll start the animation ourselves by setting the class of the element to the style that gets animated after the fact.

Receiving the events

The events get delivered to the listener() function, which is shown below.

Function listener(event) { var l = document.createElement("li"); switch(event.type) { case "animationstart": l.innerHTML = "Started: elapsed time is " + event.elapsedTime; break; case "animationend": l.innerHTML = "Ended: elapsed time is " + event.elapsedTime; break; case "animationiteration": l.innerHTML = "New loop started at time " + event.elapsedTime; break; } document.getElementById("output").appendChild(l); }

This code, too, is very simple. It simply looks at the event.type to determine which kind of animation event occurred, then adds an appropriate note to the element represents an unordered list of items, typically rendered as a bulleted list.">

(unordered list) we’re using to log these events.

The output, when all is said and done, looks something like this:

• 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

Note that the times are very close to, but not exactly, those expected given the timing established when the animation was configured. Note also that after the final iteration of the animation, the animationiteration event isn’t sent; instead, the animationend event is sent.

The HTML

Just for the sake of completeness, here’s the HTML that displays the page content, including the list into which the script inserts information about the received events:

Watch me move

This example shows how to use CSS animations to make H1 elements move across the page.

In addition, we output some text each time an animation event fires, so you can see them in action.

And here"s the live output.

Note : Reload page to see the animation, or click the CodePen button to see the animation in the CodePen environment.

Приветствую, друзья! Сегодня мы рассмотрим интереснейшую тему - создание CSS анимаций на реальном примере. Кульминацией данного урока будет создание красивой CSS анимации логотипа на миллион долларов.

Класснуть

Запинить

Материалы урока

• Исходники: Скачать
• Базовый пример из урока: https://codepen.io/agragregra/pen/PKNavm
• Стартовый шаблон из урока: https://github.com/agragregra/optimizedhtml-start-template

Немного теории

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

Если у вас уже был опыт создания анимаций в каких-либо приложениях, таких, как Adobe After Effects или престарелый Flash Professional (ныне Adobe Animate), то вам должны быть знакомы такие понятия, как «Ключевые кадры», «Временные функции или динамика движения», которые, как и в любой другой сфере анимации применимы и к анимации элементов на странице посредством CSS. Однако, в отличие от работы с интерфейсами приложений, вы создаёте вашу CSS анимацию посредством написания кода в редакторе.

CSS правило @keyframes

Создание CSS анимации начинается с объявления имени анимации в блоке @keyframes и определения так называемых шагов анимации или ключевых кадров.

Для рассмотрения теории и основ мы будет использовать чистый CSS, а в дальнейшем, уже на более сложном примере подключим использование Sass препроцессора. Подробнее узнать о Sass вы можете в уроке . Кроме того, для более глубокого понимания основ CSS, также рекомендую ознакомиться с уроками «Основы CSS - Руководство для самых маленьких» и «Все CSS селекторы в одном уроке»

Давайте рассмотрим структуру @keyframes и работу с ключевыми кадрами на простом примере:

@keyframes turning { 0% { border-radius: 0 0 0 0; transform: rotate(0deg); } 25% { border-radius: 50% 0 0 0; transform: rotate(45deg); } 50% { border-radius: 50% 50% 0 0; transform: rotate(90deg); } 75% { border-radius: 50% 50% 50% 0; transform: rotate(135deg); } 100% { border-radius: 50% 50% 50% 50%; transform: rotate(180deg); } }

В первой строчке мы видим, что после ключевого слова @keyframes идёт его название « turning». Это и есть наименование блока кеймфреймов, к которому мы будем обращаться далее.

После объявления открывается фигурная скобка (в данном примере на чистом CSS), в которой последовательно от 0% до 100% прописываются свойства для каждого ключевого кадра. Обратите внимание, что между 0% и 100% вы можете вставлять сколько угодно промежуточных значений, будь-то 50%, 75% или даже 83%. Это очень похоже на таймлайн приложения для создания анимации, где между двумя состояниями можно добавить любое промежуточное.

Далее этот блок кода с ключевыми кадрами можно применить к любому CSS селектору, но чаще всего они готовятся для конкретного селектора, если мы хотим добиться определённого поведения именно от нужного блока.

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

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

Div { width: 120px; height: 120px; background-color: violet; margin: 100px; animation: turning 2s ease-out 1s infinite alternate; }

Ничего особенного до последней строчки. Здесь мы определяем то, как будет выглядеть объект изначально и в последней строчке блока обращаемся к блоку ключевых кадров с наименованием «turning»:

Animation: turning 2s ease-out 1s infinite alternate;

Если с определением ключевых кадров всё относительно понятно, то данная строчка нуждается в немедленном объяснении. Как мы видим, сначала идёт CSS свойство «animation». Это сокращённая форма записи, как например, свойство «margin: 20px 30px 40px 50px», которое можно разделить на несколько отдельных свойств:

По данной аналогии, составное свойство «animation» можно разделить на несколько отдельных свойств:

animation-name	Название анимации, к которому происходит обращение из @keyframes
animation-duration	Продолжительность или на какое время растягивается выполнение CSS анимации. Может задаваться в секундах (s) или миллисекундах (ms)
animation-timing-function	Временная функция, динамика движения объекта или изменения свойства (ease - (по-умолчанию) анимация начинается медленно, разгоняется и заканчивается медленно; linear - анимация происходит равномерно; ease-in - начинается медленно и ускоряется к последнему ключевому кадру; ease-out - начинается быстро и плавно замедляется вконце; ease-in-out - медленно начинается и медленно заканчивается)
animation-delay	Время задержки анимации ДО старта. Также задаётся в секундах или миллисекундах
animation-iteration-count	Количество повторов (итерации) анимации (infinite - бесконечно, или можно задать простое число без единиц измерения)
animation-direction	Направление анимации, последовательно, вспять или «туда-обратно» (normal - (по-умолчанию) анимация проигрывается от начала до конца и останавливается; alternate - проигрывается от начала до конца и в обратном направлении; alternate-reverse - проигрывается с конца до начала и обратно; reverse - анимация проигрывается с конца.)
animation-play-state	Управление проигрыванием анимации (paused (пауза), running (запуск) и т.д.). Можно применить на:hover или из функции JS при необходимости
animation-fill-mode	Состояние элемента до и после воспроизведения анимации. Например, значение backwards позволяет вернуть все свойства к исходному состоянию сразу после применения анимации

Чаще всего опытные разработчики не пишут все эти свойства по отдельности, а используют краткую запись и структура её такова:

animation: (1. animation-name - название) (2. animation-duration - продолжительность) (3. animation-timing-function динамика движения) (4. animation-delay - пауза перед стартом) (5. animation-iteration-count - количество выполнений) (6. animation-direction - направление)

Animation: animationname 2s linear 1s infinite reverse

Из примера мы видим, что мы обращаемся к блоку @keyframes animationname, задаём продолжительность выполнения анимации 2 секунды, динамика линейная, пауза перед запуском составляет 1 секунду, повторяется анимация бесконечно и выполняется в обратную сторону.

Как я уже говорил ранее, начинается краткая запись со свойства «animation », после чего идут значения, последовательность которых лучше не забывать, чтобы не возникало путаницы при написании CSS анимации.

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

В данной подборке собраны самые лучшие и качественные CSS фишки. Тут Вы сможете встретить различные и удивительные демо примеры и техники от знаменитых верстальщиков и дизайнеров, которые стараются доказать, что сейчас возможно сделать практически всё только на чистом CSS. Так же Вы тут сможете встретить несколько уроков в которых подробно рассказывается как сделать подобное творение. Надеюсь, что эта подборка окажется Вам полезной.

CSS 3D облака

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



Логотипы на чистом CSS

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



Алфавит с CSS анимацией

Отличный и художественный пример использования CSS в алфавите



3D навигация для сайта

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



Дудл от Google на CSS

Один из многочисленных дудлов от поисковика Google, сделанный на CSS. Это отличный пример качественного использования CSS анимации



Слайдер

Хорошо и качественно сделанный слайдер для картинок. Плюс 4 примера в демо.



Двойное анимированное кольцо

Красивое оанимационное и разноцветное кольцо с не сильно большим кодом CSS



Размытие на CSS

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



Полное руководство по Flexbox

Данная статья о адаптивных блоках Flexbox. В ней рассказывается полностью о данных блоках, правда статья на Английском.



Красочное и анимированное меню на CSS3

Красивое выпадающее меню для сайта с иконками. Огромным плюсом является то, что оно сделано полностью на CSS.



CSS фильтры

Качественный материал на Английском, в котором рассказывается о применении CSS фильтров на изображения.



CSS формы

Пост о CSS формах с многочисленными примерами



Прогресс бары на CSS

Урок о том как создать стильные прогресс бары на чистом CSS и с анимацией. Также Вы можете посмотреть пример и скачать исходники.



Анимация — Animate.css

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

ВНИМАНИЕ! Поскольку в этом уроке мы с вами разберем анимацию, на картинках я вам пример ее работы продемонстрировать не смогу, поэтому смело открывайте редактор для кода и записывайте туда код, приведенный в этот статье.

Основы создания

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

Создаются сами эффекты переходов с помощью @keyframes

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

Итак, для начала нам нужно описать нужные изменения в @keyframes, давайте подробнее разберем, как с ними работать.

Синтаксис @keyframes

Собственно, мне проще будет объяснить вам все на готовом примере, пусть и очень простом. Вот он (код добавляется в css-файл):

@keyframes pulse{ 0%{font-size: 50px;} 50%{font-size: 60px;}} 100%{font-size: 50px;}}

@ keyframes pulse { 0 % { font - size : 50px ; } 50 % { font - size : 60px ; } }



Итак, после ключевика @keyframes идет произвольное слово, которое будет выступать названием анимации. В нашем случае это “pulse”. Далее открываются фигурные скобки, в которых записываются нужные правила.

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

Ключевые слова from и to могут заменить процентную запись, они обозначают 0% и 100% соответственно, то есть начало и конец воспроизведения.

Применяем анимацию в действии

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

Выбрать элемент, для которого она будет применяться

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

Пробуем

В своем html-файле я создал блок с классом shadow, в котором располагается простая строка текста. Наша цель – применить анимационные эффекты, описанные нами ранее, к этому текстовому элементу.

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

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

animation-name: pulse; animation-duration: 2s;

Таким образом, все повториться 4 раза, после чего прекратиться. Как вы понимаете, вместо четырех можно вписать любое число.

Бесконечная анимация в css3

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

animation-iteration-count: infinite;

animation - iteration - count : infinite ;

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

Задержка перед началом

По умолчанию воспроизведение начинается после полной загрузки страницы. Этим поведением можно управлять с помощью свойства animation-delay. Его значение задается в секундах.

Направление

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

@keyframes pulse{ 0%{font-size: 50px;} 50%{font-size: 60px;} 70%{font-size: 80px;} 100%{font-size: 50px;}}

@ keyframes pulse { 0 % { font - size : 50px ; } 50 % { font - size : 60px ; } 70 % { font - size : 80px ; } 100 % { font - size : 50px ; } }

Итак, при нормальном направлении в первой половине анимации размер шрифта увеличиться до 60 пикселей, потом он резко увеличиться еще раз, уже до 80-ти, после чего вернется в исходное положение.

Рис. 2. Исходный размер текста

Рис. 3. Размер шрифта почти в конце анимации, перед резким возвращением к исходному состоянию.

Теперь задаем:

animation-direction: reverse;

animation - direction : reverse ;

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

Форма анимации

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

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

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

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

Пример Css-анимации:

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

@keyframes move { 40% { left: 50%; bottom: 75%; animation-timing-function: ease-in; } 80% { left: 90%; bottom: -10em; } }

Подключение анимации:

Sun { animation: move 15s infinite linear; }

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

@keyframes

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

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

Animation-name

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

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

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

Animation-duration

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

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

Animation-timing-function

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

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

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

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

cubic-bezier(.24,1.49,.29,-0.48);

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

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

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

Animation-iteration-count

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

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

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

Animation-direction

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

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

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

Animation-play-state

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

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

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

Animation-delay

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

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

Animation-fill-mode

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

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

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

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

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

Animation: timing 5s infinite alternate;

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