CSS animation: примеры применения. Девять простых примеров CSS3 анимации Анимированные облака на CSS3

Последнее обновление: 06.11.2016

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

Анимация опирается на последовательню смену ключевых кадров (keyframes). Каждый ключевой кадр определяет один набор значений для анимируемых свойств. И последовательная смена таких ключевых кадров фактически будет представлять анимацию.

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

В целом объявление ключевого кадра в CSS3 имеет следующую форму:

@keyframes название_анимации { from { /* начальные значения свойств CSS */ } to { /* конечные значения свойств CSS */ } }

После ключевого слова @keyframes идет имя анимации. Затем в фигурных скобках определяются как минимум два ключевых кадра. Блок после ключевого слова from объявляется начальный ключевой кадр, а после клюевого слова to в блоке определяется конечный ключевой кадр. Внутри каждого ключевого кадра определяется одно или несколько свойств CSS, подобно тому, как создается обычный стиль.

Например, определим анимацю для фонового цвета элемента:

В данном случае анимация называется backgroundColorAnimation . Анимация может иметь произвольное название.

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

Чтобы прикрепить анимацию к элементу, у него в стиле применяется свойство animation-name . Значение этого свойства - название применяемой анимации.

Также с помощью свойства animation-duration необходимо задать время анимации в секундах или миллисекундах. В данном случае время анимации - это 2 секунды.

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

@keyframes backgroundColorAnimation { from { background-color: red; } to { background-color: blue; } } div{ width: 100px; height: 100px; margin: 40px 30px; border: 1px solid #333; background-color: #ccc; } div:hover{ animation-name: backgroundColorAnimation; animation-duration: 2s; }

Множество ключевых кадров

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

@keyframes backgroundColorAnimation { from { background-color: red; } 25%{ background-color: yellow; } 50%{ background-color: green; } 75%{ background-color: blue; } to { background-color: violet; } }

В данном случае анимация начинается с красного цвета. Через 25% времени анимации цвет меняется на желтый, еще через 25% - на зеленый и так далее.

Также можно в одном ключевом кадре анимировать сразу несколько свойств:

@keyframes backgroundColorAnimation { from { background-color: red; opacity: 0.2; } to { background-color: blue; opacity: 0.9; } }

Также можно определить несколько отдельных анимаций, но применять их вместе:

@keyframes backgroundColorAnimation { from { background-color: red; } to { background-color: blue; } } @keyframes opacityAnimation { from { opacity: 0.2; } to { opacity: 0.9; } } div{ width: 100px; height: 100px; margin: 40px 30px; border: 1px solid #333; background-color: #ccc; animation-name: backgroundColorAnimation, opacityAnimation; animation-duration: 2s, 3s; }

В качестве значения свойства animation-name через запятую перечисляются анимации, и также через запятую у свойства animation-duration задается время этих анимаций. Название анимации и ее время сопоставляются по позиции, то есть анимация opacityAnimation будет длиться 3 секунды.

Завершение анимации

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

Так, свойство animation-iteration-count определяет, сколько раз будет повторяться анимация. Например, 3 повтора анимации подряд:

Animation-iteration-count: 3;

Если необходимо, чтобы анимация запускалась бесконечное количество раз, то этому свойству присваивается значение infinite :

Animation-iteration-count: infinite;

При повторе анимация будет начинаться снова с начального ключевого кадра. Но с помощью свойства animation-direction: alternate; противоположное направление анимации при повторе. То есть она будет начинаться с конечного ключевого кадра, а затем будет переход к начальному кадру:

Animation-name: backgroundColorAnimation, opacityAnimation; animation-duration: 2s, 2s; animation-iteration-count: 3; animation-direction: alternate;

При окончании анимации браузер устанавливает для анимированного элемента стиль, который был бы до применения анимации. Но свойство animation-fill-mode: forwards позволяет в качестве окончательного значения анимируемого свойства установить именно то, которое было в последнем кадре:

Animation-name: backgroundColorAnimation; animation-duration: 2s; animation-iteration-count: 3; animation-direction: alternate; animation-fill-mode: forwards;

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

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

Animation-name: backgroundColorAnimation; animation-duration: 5s; animation-delay: 1s; /* задержка в 1 секунду */

Функция плавности анимации

Как и к переходам, к анимации можно применять все те же функции плавности:

linear : линейная функция плавности, изменение свойства происходит равномерно по времени

ease : функция плавности, при которой анимация ускоряется к середине и замедляется к концу, предоставляя более естественное изменение

ease-in : функция плавности, при которой происходит только ускорение в начале

ease-out : функция плавности, при которой происходит только ускорение в начале

ease-in-out : функция плавности, при которой анимация ускоряется к середине и замедляется к концу, предоставляя более естественное изменение

cubic-bezier : для анимации применяется кубическая функция Безье

Для установки функции плавности применяется свойство animation-timing-function :

@keyframes backgroundColorAnimation { from { background-color: red; } to { background-color: blue; } } div{ width: 100px; height: 100px; margin: 40px 30px; border: 1px solid #333; animation-name: backgroundColorAnimation; animation-duration: 3s; animation-timing-function: ease-in-out; }

Свойство animation

Свойство animation является сокращенным способом определения выше рассмотренных свойств:

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

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

Возьмем следующий набор свойств:

Animation-name: backgroundColorAnimation; animation-duration: 5s; animation-timing-function: ease-in-out; animation-iteration-count: 3; animation-direction: alternate; animation-delay: 1s; animation-fill-mode: forwards;

Этот набор будет эквивалентен следующему определению анимации:

Animation: backgroundColorAnimation 5s ease-in-out 3 alternate 1s forwards;

Создание баннера с анимацией

В качестве примера с анимацией создадим простейший анимированный баннер:

Здесь одновременно срабатывают три анимации. Анимация "banner" изменяет цвет фона баннера, а анимации text1 и text2 отображают и скрывают текст с помощью настроек прозрачности. Когда первый текст виден, второй не виден и наоборот. Тем самым мы получаем анимацию текста в баннере.

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

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

Итак, прежде всего нужно начать с того, как ее создавать. Вы наверняка привыкли к тому, что любая вещь в 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-ти, оставшуюся часть анимации он будет плавно уменьшаться, в конце концов вернув себе прежние размеры. Все просто.

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

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

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

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

Синтаксис и семантика анимации

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

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

Здесь показаны не все кадры. Свойство в данном случае реализовано плавно. Посетитель страницы наблюдает плавное перемещение с увеличением в объеме строки и движение картинки. Используя различные варианты перемещения вместо типа ease-in-out, можно управлять движением. Вариант ease-in-out дает ускорение в начале и торможение в конце, но можно выбрать и другой вариант движения.

Наложение и взаимодействие элементов

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

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

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

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

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

Анимация информации

В CSS: text animation имеет особый смысл. Текст всегда имеет значение и присутствует на веб-странице с конкретной целью. Но текст всегда менее информативен, чем изображение, а занимает много места.

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

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

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

Здесь в «нормальном» состоянии текст занимает мало места. Можно выделить главное слово или обозначить смысл. Как только мышка попадает на область текста, он разворачивается из CSS 3D animation в нормальное читабельное состояние.

Вариант экономии места в сочетании с 3D дизайном позволяет компактно размещать информацию. Освободившееся место можно использовать для других или смежных целей. За счет CSS animation нужная информация будет доступна в нужный момент времени.

Потребительский вариант анимации

Заметные успехи в создании качественных веб-ресурсов до сих пор оставляют за пределами рассмотрения один странно поставленный вопрос: почему дизайн сайта - забота разработчика?

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

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

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

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

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

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

Анимация - это набор ключевых кадров или кейфреймов хранящихся в CSS:

@keyframes animation-test { 0% { width: 100px; } 100% { width: 200px; } }

Давайте разберём, что здесь происходит. Ключевое слово @keyframes обозначает саму анимацию. Затем идет имя анимации, в нашем случае - animation-test . В фигурных скобках содержится список кейфреймов. Мы используем начальный кадр 0% и конечный 100% (их также можно записать как from и to).
Взгляните на код ниже. Анимацию можно задать и таким образом:

@keyframes animation-test { from { width: 0; } 25% { width: 75px; } 75% { width: 150px; } to { width: 100%; } }

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

Подключить анимацию к элементу можно так:

Element-selector { animation-name: your-animation-name; animation-duration: 2.5s; }

Свойство animation-name задаёт имя для анимации @keyframes . Правило animation-duration задаёт длительность анимации в секундах (1s, 30s, .5s) или миллисекундах (600ms, 2500ms).

Так же можно группировать кейфреймы:

@keyframes animation-test { 0%, 35% { width: 50px; } 75% { width: 200px; } 100% { width: 100%; } }

К одному элементу (селектору) можно применить по несколько анимаций. Их имена и параметры должны быть записаны в порядке применения:

Element-selector { animation-name: anim-name-1, anim-name-2; animation-duration: 1s, 3s; }

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

Свойство animation-delay задает задержку перед воспроизведением анимации в секундах или миллисекундах:

Element-selector { animation-name: anim-name-1; animation-duration: 3s; animation-delay: 2s; /* перед запуском анимации пройдет 2 секунды */ }

Повторное воспроизведение анимации:

Используя animation-iteration-count мы можем указывать число повторов анимации: 0, 1, 2, 3, и т.д. Или infinite для зацикливания:

Element-selector { animation-name: anim-name-1; animation-duration: 3s; animation-delay: 4s; animation-iteration-count: 5; /* анимация воспроизводится 5 раз */ }

Состояние элемента до и после анимации:

При помощи свойства animation-fill-mode возможно указывать, в каком состоянии элемент будет находиться до начала анимации и после завершения:

animation-fill-mode: forwards; - элемент анимации будет находиться в состоянии последнего кейфрейма после завершения/воспроизведения;

a nimation-fill-mode: backwards; - элемент будет находиться в состоянии первого кейфрейма;

animation-fill-mode: both; - перед началом анимации элемент будет находиться в состоянии первого кейфрейма, после завершения - в состоянии последнего.

Запуск и остановка анимации:

За это отвечает свойство animation-play-state , которое может принимать два значения: running или paused .

Element-selector:hover { animation-play-state: paused; }

Направление анимации:

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

animation-direction: normal; - анимация воспроизводится в прямом порядке;

animation-direction: reverse; - анимация воспроизводится в обратном порядке, от to к from;

animation-direction: alternate; - чётные повторы анимации воспроизводятся в обратном порядке, нечётные - в прямом;

animation-direction: alternate-reverse ; - нечётные повторы анимации воспроизводятся в обратном порядке, чётные - в прямом.

Функция плавности вывода анимированных кадров:

Свойство animation-timing-function позволяет задать специальную функцию, отвечающую за скорость воспроизведения анимации. По умолчанию, анимация начинается медленно, разгоняется быстро и замедляется в конце. Сейчас у нас существуют следующие предопределенные значения: linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end.

Однако вы можете создавать такие функции самостоятельно. Значение animation-timing-function: cubic-bezier(P1x, P1y, P2x, P2y) ; принимает на вход 4 аргумента и строит кривую распределения процесса анимации.

Изучить подробнее или опробовать создание этих функций можно на сайте http://cubic-bezier.com

И, наконец, анимацию можно разбить на набор отдельных значений (шагов) при помощи функции steps которая принимает на вход количество шагов и направление (start или end ). На примере ниже анимация состоит из 5 шагов, последний из которых произойдёт прямо перед завершением анимации:

Element-selector { animation-name: anim-name-1; animation-duration: 3s; animation-delay: 5s; animation-iteration-count: 3; animation-timing-function: steps(5, end); }

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

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

Значения с -webkit-, -moz- или -O- указывает первую версию, которая работала с префиксом.

На сайте https://www.w3schools.com можно подробней изучить CSS анимацаию (с примерами).
Одна из популярных библиотек для работы с анимациями - animate.css .

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

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

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

Надеюсь, в статье вы нашли полезную информацию для себя. Всем красивых сайтов. Не забывайте про анимашки:)

Все современные браузеры, кроме IE9- поддерживают CSS transitions и CSS animations, которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript. Анимация применяется к любым html-элементам, а также к псевдоэлементам :before и :after

Поддержка браузерами

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. Создать саму анимацию c помощью ключевого слова @keyframes
2. Подключить её к элементу, который надо анимировать, и указать нужные свойства.

Правило @keyframes

Правило @keyframes позволяет создавать анимацию с помощью ключевых кадров - состояний объекта в определенный момент времени.

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

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

Если у двух ключевых кадров будут одинаковые селекторы, то последующий отменит действие предыдущего.

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

@keyframes move { from { transform: translateX(0px); } 50% { transform: translateX(130px); } 100% { transform: translateX(0px); } }

@keyframes move { from { 50% { 100% { transform : translateX (0px ) ;

Мы создали анимацию, которая работает следующим образом:

1. Начало анимации (from можно было написать 0%) — положение элемента по оси Х равно 0px;
2. Середина анимации (50%) — положение элемента по оси Х равно 130px;
3. Конец анимации (to мы использовали 100%) — возвращаем элемент на начало анимации, т.е. положение элемента по оси Х равно 0px;

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

Ключевые кадры можно группировать:

@keyframes move { from { transform: translateX(0px); } 25%, 50% { transform: translateX(130px); } 100% { transform: translateX(0px); } }

@keyframes move { from { transform : translateX (0px ) ; 25%, 50% { transform : translateX (130px ) ; 100% { transform : translateX (0px ) ;

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

element { animation-name: animation-1, animation-2; animation-duration: 2s, 4s; }

element { animation-name : animation-1, animation-2 ; animation-duration : 2s, 4s ;

Подключение анимации к элементу происходит двумя командами — animation-name и animation-duration .

Название анимации

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

animation-name: move;

Временная функция

Свойство animation-timing-function позволяет задать специальную функцию, отвечающую за скорость воспроизведения анимации. Обратим внимание, что скорость воспроизведения анимации чаще всего нелинейная, т.е. ее мгновенная скорость в разных участках будет отличаться. На данный момент существует несколько уже встроенных аргументов для этого правила: ease , ease-in , ease-out , ease-in-out , linear , step-start , step-end .

Однако такие функции можно создавать самому. Специальная функция cubic-bezier (P1x, P1y, P2x, P2y); принимает четыре аргумента и строит на их основе кривую распределения значений в процессе анимации. Потренироваться в создании своих функций и посмотреть как они работают можно на этом сайте .

И, наконец, анимацию можно превратить в набор дискретных значений с помощью функции steps (количество шагов, направление), в качестве аргументов которой задаётся количество её шагов и направление, которое может принимать значения start или end .

• ease — функция по умолчанию, анимация начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,1).
• linear — анимация происходит равномерно на протяжении всего времени, без колебаний в скорости; соответствует cubic-bezier(0,0,1,1).
• ease-in — анимация начинается медленно, а затем плавно ускоряется в конце; соответствует cubic-bezier(0.42,0,1,1).
• ease-out — анимация начинается быстро и плавно замедляется в конце; соответствует cubic-bezier(0,0,0.58,1).
• ease-in-out — анимация медленно начинается и медленно заканчивается; соответствует cubic-bezier(0.42,0,0.58,1).
• cubic-bezier(x1, y1, x2, y2) — см.выше.
• inherit — наследует это свойство от родительского элемента.

Визуальное сравнение

Анимация с задержкой

Свойство animation-delay определяет задержку до начала воспроизведения анимации, задаётся в секундах или миллисекундах. Отрицательная задержка начинает анимацию с определенного момента внутри её цикла, т.е. со времени, указанного в задержке. Это позволяет применять анимацию к нескольким элементам со сдвигом фазы, изменяя лишь время задержки. Если вы хотите, чтобы анимация началась с середины, задайте отрицательную задержку, равную половине времени, установленном в animation-duration . Не наследуется.

element { animation-name: animation-1; animation-duration: 2s; animation-delay: 10s; // Перед стартом этой анимации пройдет 10 сек. }

Повтор анимации

Свойство animation-iteration-count позволяет запустить анимацию несколько раз. Не наследуется. В качестве значения выставляем любое положительное значение 1, 2, 3 … и т.д. либо infinite для бесконечного повторения. Значение 0 или любое отрицательное число удаляют анимацию из проигрывания.