Мы недавно видели, что переходы - это просто способ анимации стилевых свойств от исходного до конечного состояния.
Итак, переходы в CSS являются специфическим видом анимации, где:
- есть только два состояния: начало и конец;
- анимация не зациклена;
- промежуточные состояния управляются только функцией времени.
Но что если вы хотите:
- иметь контроль над промежуточными состояниями?
- зациклить анимацию?
- сделать разные виды анимаций для одного элемента?
- анимировать определённое свойство только на половину пути?
- имитировать различные функции времени для разных свойств?
Анимация в CSS позволяет всё это, и не только.
Анимация как мини-фильм, где вы в качестве режиссёра даёте инструкции (стилевые правила) вашим актёрам (элементам HTML) для разных сцен (ключевые кадры).
Свойства анимации
Как и transition , свойство animation является сокращённым для нескольких других:
- animation-name : название анимации;
- animation-duration : как долго длится анимация;
- animation-timing-function : как вычисляются промежуточные состояния;
- animation-delay : анимация начинается спустя некоторое время;
- animation-iteration-count : сколько раз должна выполняться анимация;
- animation-direction : должно движение идти в обратную сторону или нет;
- animation-fill-mode : какие стили применяются до начала анимации и после её завершения.
Быстрый пример
Для оживления кнопки загрузки, вы можете написать анимацию подпрыгивания :
@keyframes bouncing{ 0% { bottom: 0; box-shadow: 0 0 5px rgba(0,0,0,0.5); } 100% { bottom: 50px; box-shadow: 0 50px 50px rgba(0,0,0,0.1); } } .loading-button { animation: bouncing 0.5s cubic-bezier(0.1,0.25,0.1,1) 0s infinite alternate both; }
Сначала нужно написать реальную анимацию подпрыгивания с помощью @keyframes и назвать её .
Я использовал сокращенное свойство animation и включил все возможные варианты:
- animation-name: bouncing (совпадает с названием ключевых кадров)
- animation-duration: 0.5s (полсекунды)
- animation-timing-function: cubic-bezier(0.1,0.25,0.1,1)
- animation-delay: 0s (без задержки)
- animation-iteration-count: infinite (воспроизводится бесконечно)
- animation-direction: alternate (идёт назад и вперёд)
- animation-fill-mode: both
@keyframes
Перед применением анимации к элементам HTML, вам требуется написать анимацию с помощью ключевых кадров . Вообще, ключевые кадры - это каждый промежуточный шаг в анимации. Они определяются с помощью процентов:
- 0% - первый шаг анимации;
- 50% - шаг на полпути в анимации;
- 100% - последний шаг.
Можно также использовать ключевые слова from и to вместо 0% и 100%, соответственно.
Вы можете определить столько ключевых кадров, сколько хотите, вроде 33%, 4% или даже 29.86%. На практике вы будете писать только некоторые из них.
Каждый ключевой кадр является правилом CSS , это означает, что вы можете писать свойства CSS как обычно.
Чтобы определить анимацию, просто напишите ключевое слово @keyframes с его названием :
@keyframes around { 0% { left: 0; top: 0; } 25% { left: 240px; top: 0; } 50% { left: 240px; top: 140px; } 75% { left: 0; top: 140px; } 100% { left: 0; top: 0; } } p { animation: around 4s linear infinite; }
Обратите внимание, что начало 0% и конец 100% содержат одинаковые правила CSS. Это гарантирует, что анимация зациклится идеально. Поскольку счётчик итераций установлен как infinite , то анимация будет идти от 0% до 100%, а затем немедленно обратно к 0% и так бесконечно.
animation-name
Название анимации используется, по крайней мере, дважды :
- при написании анимации с помощью @keframes ;
- при использовании анимации с помощью свойства animation-name (или через сокращённое свойство animation ).
Подобно именам классов CSS, название анимации может включать в себя только:
- буквы (a-z);
- цифры (0-9);
- подчёркивание (_);
- дефис (-).
Название не может начинаться с цифры или с двух дефисов.
animation-duration
Как и длительность перехода , длительность анимации может быть установлена в секундах (1s) или миллисекундах (200ms).
Selector { animation-duration: 0.5s; }
Значение по умолчанию равно 0s, что означает отсутствие анимации вообще.
animation-timing-function
Подобно функциям времени для переходов , функции времени для анимации могут использовать ключевые слова , такие как linear , ease-out или могут быть определены с помощью произвольных кривых Безье .
Selector { animation-timing-function: ease-in-out; }
Значение по умолчанию: ease .
Поскольку анимация в CSS использует ключевые кадры, вы можете установить линейную функцию времени и моделировать конкретную кривую Безье, определяя множество очень специфичных ключевых кадров. Посмотрите Bounce.js для создания передовой анимации.
animation-delay
Как и с задержкой перехода , задержка анимации может быть установлена в секундах (1s) или миллисекундах (200ms).
По умолчанию равно 0s, что означает отсутствие любой задержки.
Полезно использовать, когда включается несколько анимаций в серии .
A, .b, .c { animation: bouncing 1s; } .b { animation-delay: 0.25s; } .c { animation-delay: 0.5s; }
animation-iteration-count
По умолчанию, анимация воспроизводится только один раз (значение 1). Вы можете установить три типа значений:
- целые числа, вроде 2 или 3;
- дробные числа, вроде 0.5, которые будут воспроизводить только половину анимации;
- ключевое слово infinite , которое будет повторять анимацию бесконечно.
animation-direction
Свойство animation-direction определяет, в каком порядке читаются ключевые кадры.
- normal : начинается с 0%, заканчивается на 100%, начинается с 0% снова.
- reverse : начинается со 100%, заканчивается на 0%, начинается со 100% снова.
- alternate : начинается с 0%, идёт до 100%, возвращается на 0%.
- alternate-reverse : начинается со 100%, идёт до 0%, возвращается на 100%.
Это легче представить, если счётчик итераций анимации установлен как infinite .
animation-fill-mode
Свойство animation-fill-mode определяет, что происходит перед началом анимации и после её завершения.
При определении ключевых кадров можно указать правила CSS , которые будут применяться на разных шагах анимации. Теперь эти правила CSS могут столкнуться с теми, которые уже применяются к анимируемым элементам.
animation-fill-mode позволяет сообщить браузеру, если стили анимации также должны применяться за пределами анимации .
Давайте представим себе кнопку , которая является:
- красной по умолчанию;
- становится синей в начале анимации;
- и в итоге зелёной , когда анимация завершена.
Мы собрали для вас подборку лучших примеров JQuery анимации и CSS3 . Вы можете посмотреть исходный код, чтобы понять, как анимируется каждый из примеров.
Работающие часы на основе CSS3
Работающие часы на CSS3 , в примере используется анимация и фигуры CSS , без изображений или JavaScript :
Демо-версия Скачать
Анимированные облака на CSS3
В данном примере используется только анимация CSS3 :
Демо-версия Скачать
Анимированные иконки погоды на CSS3
Демо-версия Скачать
Анимации загрузки на CSS3
Демо-версия Скачать
3D вращающаяся планета на основе CSS3
Отличная идея и сочетание двух концепций. А немного доработав масштабирование и анимацию, можно удивительный результат!
Демо-версия Скачать
Эффект анимации текста
Демо-версия Скачать
3D анимированная диаграмма
3D диаграмма , созданная с помощью HTML и CSS3-преобразований . Тени созданы с помощью градиентов CSS , анимация — с помощью переходов. AngularJS используется для обновления данных:
Демо-версия Скачать
JQuery эффект анимации снега
Демо-версия Скачать
CSS3-анимации загрузки
Демо-версия Скачать
Анимированная иконка гамбургер-меню на CSS3
Демо-версия Скачать
AT-AT (шагающий броневик из Звездных войн) на CSS3
Пример, который я создал на CSS3 . Можно было бы, конечно, уменьшить количество div , использованных для создания частей тела. Также стоило бы оптимизировать пример и добавить класс JQuery с анимацией :
Демо-версия Скачать
Gran Turismo
Демо-версия Скачать
3D Солнечная система
Демо-версия Скачать
Анимация дыма
Это CSS3-версия анимации. Клубы дыма создаются без изображений, а анимация задается без использования JavaScript и JQuery эффектов анимации:
Демо-версия Скачать
Анимированный логотип
Демо-версия Скачать
IE10 3D куб
Демо-версия Скачать
Анимация языков пламени на основе CSS3
Демо-версия Скачать
Логотип Бэтмена на -webkit- CSS3 анимация
Демо-версия Скачать
Концепт дизайна погодного приложения на основе CSS
Демо-версия Скачать
Анимация природы на CSS3
Демо-версия Скачать
Гуляющий кот (цикл без JQuery анимации)
Демо-версия Скачать
3D-терминал на CSS3
Демо-версия Скачать
Анимированный график на CSS3
Линейный график на HTML и CSS3 . При наведении курсора мыши на раздел отображается его название. Данные заполняются и обновляются с помощью AngularJS . Преобразование вращения вручную применено к точкам графика, а анимация задается с помощью переходов CSS3 :
Демо-версия Скачать
Вращающиеся 3D HTML-формы с помощью CSS3
Демо-версия Скачать
Анимации индикатора подключения на основе CSS3
Демо-версия Скачать
Steps-анимация на Jquery
Анимации JQuery пример, иллюстрирующий функцию тайминга анимации: steps() в сочетании с листом спрайтов:
Продвинутая анимация траектории
Анимация с применением SVG , которая может пригодиться при разработке анимации траектории:
Скачать / Дополнительная информация
Анимации прокручивания с использованием wow.js
Скачать / Дополнительная информация
Анимация с использованием листов спрайтов на CSS
Ниже приводятся пример с использованием листов спрайтов с пояснениями без JQuery эффектов анимации:
Скачать / Дополнительная информация
Анимированный логотип для Herr Brueckers
Скачать / Дополнительная информация
Анимация рисования контура
Скачать / Дополнительная информация
Бесконечная анимация галереи на основе анимации блока JQuery
Скачать / Дополнительная информация
Анимированные круги с использованием CSS / SVG
Скачать / Дополнительная информация
SVG-анимация с помощью CSS
Пример того, как анимировать SVG . Для демонстрационных целей я использовал иконки «Small Icons » Ника Фроста и Грега Лапена :
Скачать / Дополнительная информация
CSS3 параллакс анимация боевых истребителей от MySkins Studio
Это еще одна CSS3 анимация , созданная с использованием параллакса CSS3 и кейфреймов, но без JQuery анимации :
Скачать / Дополнительная информация
Анимированный SVG-логотип
Скачать / Дополнительная информация
Плоская анимированная круговая иконка на основе CSS3
Скачать / Дополнительная информация
Анимация с setTimeout
Небольшой пример синхронизации анимации, в которой вокруг экрана перемещается шар, с помощью setTimeout :
Скачать / Дополнительная информация
SVG-анимация солнца с использованием CSS
Скачать / Дополнительная информация
JQuery-анимация
Простая JQuery анимация:
Скачать / Дополнительная информация
CSS-анимация орбиты Земли
Скачать / Дополнительная информация
Анимация летящей птицы на CSS3
Скачать / Дополнительная информация
Анимация атома на основе CSS3
Скачать / Дополнительная информация
3D-анимация часов с использованием JS
В процессе разработки использовались 3D-эффекты CSS3 и JQuery анимация текста. Пример работает в Google Chrome 28.0 и Firefox 22.0 . В то же время анимация не работает в IE 10 из-за какой-то ошибки доступа JQuery , которую я не удосужился исправить:
Скачать / Дополнительная информация
Анимированное Лондонское обзорное колесо из двух элементов
Скачать / Дополнительная информация
Анимация Drag Race
Анимация гонок на чистом CSS / HTML :
Скачать / Дополнительная информация
Анимированный праздничный торт
Скачать / Дополнительная информация
Анимированный логотип
Этот анимированный логотип без JQuery эффектов анимации выглядит очень элегантно:
Скачать / Дополнительная информация
Анимированный логотип компании на основе CSS3
Анимированный логотип компании на чистом HTML / CSS3 :
Скачать / Дополнительная информация
Анимированная иконка камеры
Скачать / Дополнительная информация
Анимация оранжевого автомобиля
Скачать / Дополнительная информация
Анимированная иконка Wi-Fi
Скачать / Дополнительная информация
Анимированные адаптивные CSS- иконки погоды
Это небольшой набор анимированных иконок погоды на CSS . Обратите внимание, что большая часть анимации создается с помощью псевдо-элементов и JQuery анимации:
Скачать / Дополнительная информация
Можно управлять длительностью анимации, повторением, направлением, типом движения и шагами. Анимировать можно любые элементы, в том числе псевдо-элементы.
Обязательное условие - наличие конкретных значений. Свойства со значением 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;
Обязательные значения - имя анимации и длительность. Первое временное значение считается длительностью воспроизведения, второе - задержкой.
Последнее обновление: 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 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, очень часто применяющееся в анимациях.