Анимация интерфейсов с помощью CSS. Анимация CSS примеры и готовый код Анимация природы на CSS3
Для создания анимации применяются свойства CSS transition и animation Рассмотрим их подробно с примерами.
Элементы анимации не только делают дизайн удобнее и элегантнее, но и вызывают у пользователей положительные эмоции, которые буквально притягивают к сайту.
Это что касается пользовательских показателей.
Что же касается веб-разработки — анимация оживляет элементы контента средствами CSS, без привлечения JavaScript, что хорошо для мобильных устройств.
Должен предупредить — прежде чем браться за анимацию элементов, нужно познакомиться с основами HTML и CSS
Основные компоненты CSS анимации — свойства transition и animation , и правило @keyframes .
Рассмотрим их по порядку.
transition
Свойство transition применяется для создания простых анимаций, то есть оно создаёт эффект перехода между двумя состояниями элемента.
transition в свою очередь можно разделить на 4 составляющие, каждая из которых влияет на определённый аспект эффекта перехода.
1. transition-property — определяет свойство, которое будет анимироваться. Например если элемент будет сдвигаться, то это будут свойства top, left, margin и т. п., менять размер, то width или height, менять цвет — color или background.
Записывается так:
transition-property : left ;
2. transition-duration — продолжительность эффекта перехода. Задаётся в секундах.
transition-duration : 3s ;
3. transition-timing-function — скорость эффекта перехода. Принимает следующие значения:
ease — анимация медленно начинается, затем ускоряется и к концу опять замедляется;
ease-in — медленно начинается, а к концу ускоряется;
ease-out — быстро начинается, а к концу замедляется;
ease-in-out — замедление в начале и в конце;
linear — постоянная скорость;
cubic-bezier — задаёт все значения в числовом выражении. Например значение ease записывается так: cubic-bezier(0.25,0.1,0.25,1).
4. transition-delay — задержка начала анимации. Задается в секундах. Например анимация может начаться через определённое время после загрузки страницы.
В сокращённом варианте запись анимации выглядит следующим образом — в свойстве transition задаются все вышеперечисленные значения по порядку через пробел.
transition : left 3s ease(или cubic-bezier(0.25,0.1,0.25,1) 3s ;
Пример в котором элемент будет перемещаться при наведении на него курсора.
Результат:
animation и @keyframes
Свойство animation и правило @keyframes применяются для создания анимации любой сложности.
Свойство animation задаёт параметры действия для анимации (длительность анимации, повторение, направление, тип движения, шаги), а в блоке @keyframes задаётся сама анимация по шагам (изменения вида и положения)
Свойство animation включает в себя восемь составляющих:
1. animation-name — имя анимации. задаётся произвольно. Необходимо для того, чтоб определить анимацию в блоке @keyframes , так как для одного элемента может быть задано несколько анимаций.
2. animation-duration — длительность анимации, задаётся в секундах (s) или миллисекундах (ms).
3. animation-timing-function — определяет тип анимации и принимает следующие значения:
ease — скольжение;
linear — ровное движение;
ease-out — ускорение в начале;
ease-in — ускорение в конце;
ease-in-out — более плавное скольжение, чем ease
cubic-bezier — задаёт числовые параметры позволяющие реализовать более сложные типы анимации. Инструмент для подбора числовых параметров — cubic-bezier.com
step-start и step-end — задаёт пошаговую анимацию (счётчик)
steps — задаёт количество шагов за которые будет выполнена анимация (секундомер — steps(60) animation-duration -60s)
4. animation-iteration-count — задаёт число повторений анимации. Принимает значения:
любое число — сколько раз повторяется анимация;
infinite — бесконечное повторение;
5. Animation-direction — задаёт направление движения. Принимает значения:
normal — движение слева на право;
reverse — движение справа на лево;
alternate — полный цикл туда и обратно;
alternate-reverse — полный цикл, но начинается и заканчивается с конца;
6. animation-play-state — задаёт остановку анимации. Принимает значения:
running — анимация проходит нормально (по умолчанию);
paused — анимация замирает на первом шаге;
7. animation-delay — задаёт задержку анимации перед началом воспроизведения. Определяется в секундах (s) и миллисекундах (ms)
8. animation-fill-mode — позволяет проигрывать анимацию вне указанного времени воспроизведения. Принимает значения:
none — анимация в работает только в заданном времени воспроизведения, потом возвращается на место.
forwards — анимация продолжается после окончания времени воспроизведения;
backwards — анимация начинается до начала воспроизведения;
both — анимация работает и до начала и после окончания времени воспроизведения;
Некоторые из этих свойств поначалу могут показаться абсурдными, но при создании сложных анимаций они позволяют реализовать смелые творческие решения.
Все свойства можно записать в сокращённом виде, указав в свойстве animation только их значения. Например:
Правило @keyframes — второй шаг в создании сложной анимации.
Внутри этого правила создается поэтапное воспроизведение преобразований происходящих с элементом.
На практике это выглядит следующим образом: в таблице стилей создаётся селектор @keyframes внутрь которого помещаются селекторы последовательно определяющие состояние элемента.
Например, возьмём элемент
, зададим ему форму квадрата, фоновый цвет, и сделаем чтобы этот цвет менялся от полной прозрачности, к полной непрозрачности.div
{
width
: 200px
;
height
: 200px
;
background-color
: #FF3D00
;
animation
: nev 5s infinite alternate
;
@keyframes nev
{
from
{ /* От */
opacity
: 0
; /* полная прозрачность */
}
to
{ /* До */
opacity
: 1
; /* полная непрозрачность */
}
}
Селекторами from и to задаётся преобразование от одного состояния элемента до другого.
Но гораздо удобнее задавать изменение состояния в процентах. Тогда число селекторов можно увеличить, и тем самым разбить процесс на большее число этапов.
Каждому этапу при этом можно задать что-то своё. Например продолжительность, границу, размер и т.п.
@keyframes nev
{
0%
{
opacity
: 0
;
border-radius
: 50%
;
}
50%
{
opacity
: 0.5;
border-radius
: 30%
;
}
100%
{
opacity
: 1
;
border-radius
: 0
;
}
}
Пример появления и исчезновения квадрата:
Результат:
Надеюсь основы создания анимации понятны. Теперь, когда Вам известны свойства, значения и инструменты, открывайте Notepad++ и творите от простого к сложному.
В следующей статье «CSS перемещение, вращение, 3D» подробно разберём свойство transform, очень часто применяющееся в анимациях.
| 18.02.2016
CSS3 открывает неограниченные возможности перед UI-дизайнерами, и главный плюс состоит в том, что практически любую идею можно легко реализовать и воплотить в жизнь, не прибегая к использованию JavaScript.
Удивительно, как простые вещи могут оживить обычную веб-страницу, сделать ее более доступной для восприятия пользователями. Речь идет о CSS3 переходах, с помощью которых можно позволять элементу трансформироваться и изменять стиль, например, при наведении курсора. Девять примеров CSS3 анимации, которые доступны ниже, помогут создать на сайте атмосферу отзывчивости, а также улучшить общий вид страницы благодаря красивым плавным переходам.
Для более детального ознакомления вы можете скачать архив с файлами.
Все эффекты работают с помощью свойства transition (англ. transition - «переход», «превращение») и псевдокласса:hover , который определяет стиль элемента при наведении на него курсора мыши ( в нашем учебнике). Для наших примеров мы использовали блок div размером 500×309 пикселей, исходный цвет фона #6d6d6d и длительность перехода от одного состояния к другому 0,3 секунды.
Body > div { width: 500px; height: 309px; background: #6d6d6d; -webkit-transition: all 0.3s ease;; -moz-transition: all 0.3s ease;; -o-transition: all 0.3s ease;; transition: all 0.3s ease; }
1. Изменение цвета при наведении курсора
Когда-то реализация такого эффекта была довольно кропотливой работой, с математическими вычислениями определенных значений RGB. Сейчас же достаточно записать стиль CSS, в котором необходимо добавить к селектору псевдокласс:hover и задать фоновый цвет, который плавно (за 0,3 секунды) заменит собой исходный цвет фона при наведении курсора на блок:
Color:hover { background:#53ea93; }
2. Появление рамки
Интересная и яркая трансформация - внутренняя рамка, плавно появляющаяся при наведении мыши. Хорошо подойдет для украшения различных кнопок. Чтобы добиться такого эффекта, используем псевдокласс:hover и свойство box-shadow с параметром inset (задает тень внутри элемента). Кроме этого, потребуется задать растяжение тени (в нашем случае это 23px) и её цвет:
Border:hover { box-shadow: inset 0 0 0 23px #53ea93; }
3. Свинг
Данная CSS анимация - исключение, т. к. здесь свойство transition не используется. Вместо него мы задействовали:
- @keyframes - базовую директиву для создания покадровой CSS-анимации, которая позволяет делать т. н. раскадровку и описывать анимацию в виде списка ключевых моментов;
- animation и animation-iteration-count - свойства для задания параметров анимации (длительность и скорость) и количества циклов (повторов). В нашем случае повтор 1.
4. Затухание
Эффект плавного затухания - это, по сути, обычное изменение прозрачности элемента. Анимация создается в два этапа: сначала необходимо установить первоначальное состояние прозрачности 1 - то есть полная непрозрачность, после чего указать её значение при наведении мыши - 0.6:
Fade { opacity: 1; } .fade:hover { opacity: 0.6; }
Для противоположного результата поменяйте значения местами:
5. Увеличение
Чтобы при наведении курсора блок увеличивался, мы воспользуемся свойством transform и зададим ему значение scale(1.2) . При этом блок увеличится на 20 процентов с сохранением своих пропорций:
Grow:hover { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); }
6. Уменьшение
Уменьшить элемент так же просто, как и увеличить. Если в пятом пункте для увеличения масштаба нам необходимо было указать значение больше, чем 1, то для уменьшения блока мы просто укажем значение, которое будет меньше единицы, например, scale(0.7) . Теперь при наведении мыши блок будет пропорционально уменьшаться на 30 процентов от своего первоначального размера:
Shrink:hover { -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); }
7. Трансформация в круг
Одна из часто используемых анимаций - прямоугольный элемент, который при наведении курсора преобразовывается в окружность. С помощью свойства CSS border-radius , использованного в паре с:hover и transition , это можно реализовать без проблем:
Circle:hover { border-radius: 70%; }
8. Вращение
Забавный вариант анимации - поворот элемента на определенное количество градусов. Для этого нам снова понадобится свойство transform , но уже с другим значением - rotateZ(20deg) . При таких параметрах блок будет повернут на 20 градусов по часовой стрелке относительно оси Z:
Rotate:hover { -webkit-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); transform: rotateZ(20deg); }
9. 3D тень
Мнения дизайнеров расходятся в том, уместен ли данный эффект во флэт-дизайне. Тем не менее, эта CSS3 анимация является весьма оригинальной и также используется на веб-страницах. Добиваться трехмерного эффекта будем с помощью уже знакомых нам свойств box-shadow (создаст многослойную тень) и transform с параметром translateX(-7px) (обеспечит сдвиг блока по горизонтали влево на 7 пикселей):
Threed:hover { box-shadow: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px #53ea93, 7px 7px #53ea93; -webkit-transform: translateX(-7px); transform: translateX(-7px); }
Поддержка браузерами
На сегодняшний день свойство transition поддерживается следующими браузерами:
| Десктопные браузеры | |
|---|---|
| Internet Explorer | Поддерживается версией IE 10 и выше |
| Chrome | Поддерживается с версии 26 (до версии 25 работает с префиксом -webkit-) |
| Firefox | Поддерживается с версии 16 (в версиях 4-15 работает с префиксом -moz-) |
| Opera | Поддерживается с версии 12.1 |
| Safari | Поддерживается с версии 6.1 (в версиях 3.1-6 работает с префиксом -webkit-) |
Остальные свойства, использованные в данных примерах, такие как transform , box-shadow и т. д., также поддерживаются почти всеми современными браузерами. Однако, если вы собираетесь использовать эти идеи для своих проектов, настоятельно рекомендуем перепроверять кроссбраузерность.
Надеемся, что эти примеры CSS3 анимации были полезными для вас. Желаем творческих успехов!
В данной подборке собраны самые лучшие и качественные 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 анимаций на реальном примере. Кульминацией данного урока будет создание красивой 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 ).
Можно управлять длительностью анимации, повторением, направлением, типом движения и шагами. Анимировать можно любые элементы, в том числе псевдо-элементы.
Обязательное условие - наличие конкретных значений. Свойства со значением 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;
Обязательные значения - имя анимации и длительность. Первое временное значение считается длительностью воспроизведения, второе - задержкой.
