Анимация на CSS3 для дизайнера
Свойства: transition, transform, animation
Для того чтобы освоить азы CSS3-анимации, мы будем оживлять flat-кнопку «Войти». Напишем ее на HTML, оформим на CSS, а затем анимируем свойствами CSS3: transition и transform. В конце разберем свойство animation с правилом @keyframes, позволяющее применять нескольких эффектов в разное время.
Создание кнопки
Описание элемента в HTML
Прежде чем начать, нужно определиться куда писать код. jsFiddle — одна из самых популярных сред для веб-разработки. Зарегистрируйтесь в jsFiddle, чтобы сохранить все, что вы напишите
В интерфейсе jsFiddle, в блоке для написания HTML-кода, опишем предмет анимации с помощью тегов и атрибута class
Тег div выделяет элемент документа для изменения вида его содержимого стилями CSS.

Атрибут тега class ="Имя класса" определяет стиль элемента. По сути это ссылка на стиль элемента, который мы позднее опишем в блоке CSS. Раз мы создаем кнопку, то и назовем класс «button»

Тег input предназначен для создания текстовых полей, которые мы поместим внутрь элемента, в нашем примере это «Войти»

Скопируйте готовый код в среду HTML и нажмите «Run» чтобы увидеть результат. На этом мы закончим работу с HTML и дальше все волшебство будет происходить в среде CSS.
Стиль кнопки (статика)
Создание селектора
Синтаксис CSS-языка состоит из селекторов и свойств. Селектор указывает на элемент, к которому относятся свойства. А свойства описывают как надо оформить этот элемент.

К более сложным селекторам можно отнести селекторы с использованием классов и псевдоклассов. Класс позволяет объединять разные элементы в смысловые группы и применять к ним одинаковое оформление. Мы будем использовать оба типа сложных селекторов.

Скопируйте этот код со свойствами кнопки в блок CSS:
Разберем, что здесь написано:

.button — это селектор с использованием класса, ссылка на одноименный элемент в структуре html, созданный в прошлом шаге

Остальные строки — это свойства. В примере приведены самые популярные из них:
background-color; border; height; width. Они задают параметры самой кнопки: цвет, обводку, ширину и высоту

color; text-align; line-height; font-size; letter-spacing; font-weight; font-family относятся к стилю надписи на кнопке: цвет текста, выравнивание, интерлиньяж, размер шрифта, кернинг, начертание шрифта и сам шрифт (этим значением мы подключили внешний шрифт из библиотеки Google Fonts)

Результат (кнопка в пассивном состоянии):
Cостояние "hover"
Создание псевдокласса и его свойств
Добавим новые свойства для изменения цвета кнопки при наведении на нее мыши. Для этого будем использовать псевдокласс hover.
Все свойства, которые мы указали, будут применены вместо значений, заданных в состоянии статики. Поэтому, для того чтобы изменить цвет кнопки, мы указали свойство background-color и добавили одно новое — cursor, задающее вид указатели мыши при наведении на кнопку.

Добавьте код в среду CSS, ниже класса статики. Нажмите «Run» и наведите курсор на кнопку.
transition
Продолжительность анимации
Цвет, размер (элемента, отступов), положение и другие свойства, которые можно выразить в количественном эквиваленте, анимируются с помощью свойства transition.

Само свойство объединяет несколько значений:
transition-property (определяет свойство, которое будет изменено),
transition-duration (длительность анимации),
transition-timing-function (плавность анимации)
transition-delay (время задержки).

Для экономии места все эти параметры можно записать одной строкой, соблюдая порядок значений (больше о transition на WebReference)

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

transition: all 1s 0.2s — эта строка задает свойства, которые нужно анимировать, общую в 1 секунду и задержкой в 0,2 секунды

Возникает вопрос куда записать это свойство — в статику или в ховер? Если свойство transition записать в свойства ховера, то как только вы уберете курсор с кнопки, анимация будет пропадать, время задержки не будет учтено, поэтому копируем строку в состояние статики т. е. к основным атрибутам кнопки.
transition-timing-function
Плавность анимации
При создании анимации свойством transition мы не указали ее плавность. По умолчанию к кнопке применился параметр easy. Изменим этот параметр применив координаты cubic-bezier (0.755, 0.05, 0.855, 0.06) (подробнее о кривых Безье было рассказано в публикации «Как описывать анимацию»).

Чтобы все заработало, вставьте это значение между длительностью анимации и временем задержки, должна получиться такая строка:
transition: all 1s cubic-bezier (0.755, 0.05, 0.855, 0.06) 0.2s

Результат:
transform
Эффекты анимации
Это еще одно свойство, позволяющее добавить интересные эффекты (подробнее о transform на WebReference). В качестве примера увеличим кнопку при ховере:

transform: scale (1.05)

В отличие от transition, свойство transform записывается в состояние hover.

Результат:
Свойство "animation"
и ключевые кадры @keyframes
Последующие действия потребуют изменений в уже написанную анимацию. Поэтому нажмите кнопку Fork, если хотите сохранить результат
Распределим созданные ранее эффекты по времени длительности анимации при помощи правила @keyframes.

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

Будет понятнее разобрать на примере:
@keyframes neweffects { 

0% { 
transform: scale(1); 
} 

50% { 
transform: scale(1.05); 
background-color: #99FFCC; 
} 

100% { 
transform: scale(1); 
} 

} 
Где @keyframes neweffects — это правило и имя анимации (имя может быть любым), а 0, 50, 100% отметки на временной шкале, запускающие анимацию (начало, середина и конец анимации). Количество этих промежутков может быть любым, а значение процента дробным. В коде выше видно, что изменения происходят лишь в середине анимации: увеличивается размер и изменяется цвет кнопки.

Добавьте код с ключевыми кадрами в среду CSS.

А теперь запустим анимацию. Для этого удалим из состояния hover свойство transform, а в статике удалим свойство transition.

Вместо свойства transition запишем в статику новое свойство:
animation: neweffects 3s infinite (читается аналогично предыдущим свойствам: имя анимации, длительность и цикличность).

Само по себе свойство animation, как transition и transform включает в себя несколько параметров, позволяющее одновременно задать их значения (подробнее об animation на WebReference).


Свойство animation-iteration-count может быть выражено числом, которое обозначает количество повторений анимации или параметром infinite, при котором анимация проигрывается бесконечно.

У вас должен получиться такой результат:
Полезные ссылки
cubic-bezier.com – помогает создать произвольные координаты кривых Безье

easings.net – шпаргалка с часто используемыми функциями и их координатами

daneden.github.io – здесь можно скачать css файл с готовыми эффектами анимации

htmlacademy.ru - курс по анимации от HTML Academy

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

codepen.io - можно найти потрясающие элементы анимации, созданной на голом CSS

Было полезно?