Анимация CSS примеры и готовый код. Анимация интерфейсов с помощью CSS Css animation примеры

| 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 поддерживается следующими браузерами:

Остальные свойства, использованные в данных примерах, такие как transform , box-shadow и т. д., также поддерживаются почти всеми современными браузерами. Однако, если вы собираетесь использовать эти идеи для своих проектов, настоятельно рекомендуем перепроверять кроссбраузерность.

Надеемся, что эти примеры CSS3 анимации были полезными для вас. Желаем творческих успехов!

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

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

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

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

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

• Первый – определяет начальное положение элемента.
• Второй – определяет положение элемента после смещения элемента до середины окна.
• Третий – определяет конечную точку анимации (начальное положение элемента).

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

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

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

Прежде чем мы перейдем к созданию анимации, хочу обратить Ваше внимание на текущую поддержку свойств анимации браузерами:

Определение ключевых кадров

Результат нашего примера:

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

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

Результат нашего примера:

Количество анимационных циклов

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

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

Рассмотрим следующий пример:

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

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

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

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

Свойство 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 анимаций на реальном примере. Кульминацией данного урока будет создание красивой 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: (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 ).

Последнее обновление: 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 отображают и скрывают текст с помощью настроек прозрачности. Когда первый текст виден, второй не виден и наоборот. Тем самым мы получаем анимацию текста в баннере.