Девять простых примеров CSS3 анимации. CSS анимация для самых маленьких Css несколько анимаций
Мы недавно видели, что переходы - это просто способ анимации стилевых свойств от исходного до конечного состояния.
Итак, переходы в 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 анимации:
Скачать / Дополнительная информация
CSS3-анимация придаёт сайтам динамичность. Она оживляет веб-страницы, улучшая взаимодействие с пользователем. В отличие от CSS3-переходов, создание анимации базируется на ключевых кадрах, которые позволяют автоматически воспроизводить и повторять эффекты на протяжении заданного времени, а также останавливать анимацию внутри цикла.
CSS3-анимация может применяться практически для всех html-элементов, а также для псевдоэлементов:before и:after . Список анимируемых свойств приведен на странице. При создании анимации не стоит забывать о возможных проблемах с производительностью, так как на изменение некоторых свойств требуется много ресурсов.
Введение в CSS-анимацию
Поддержка браузерами
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. Ключевые кадры
Ключевые кадры используются для указания значений свойств анимации в различных точках анимации. Ключевые кадры определяют поведение одного цикла анимации; анимация может повторяться ноль или более раз.
Ключевые кадры указываются с помощью правила @keyframes , определяемого следующим образом:
@keyframes имя анимации { список правил }
Создание анимации начинается с установки ключевых кадров правила @keyframes . Кадры определяют, какие свойства на каком шаге будут анимированы. Каждый кадр может включать один или более блоков объявления из одного или более пар свойств и значений. Правило @keyframes содержит имя анимации элемента, которое связывает правило и блок объявления элемента.
@keyframes shadow { from {text-shadow: 0 0 3px black;} 50% {text-shadow: 0 0 30px black;} to {text-shadow: 0 0 3px black;} }
Ключевые кадры создаются с помощью ключевых слов from и to (эквивалентны значениям 0% и 100%) или с помощью процентных пунктов, которых можно задавать сколько угодно. Также можно комбинировать ключевые слова и процентные пункты. Если кадры имеют одинаковые свойства и значения, их можно объединить в одно объявление:
@keyframes move { from, to { top: 0; left: 0; } 25%, 75% {top: 100%;} 50% {top: 50%;} }
Если 0% или 100% кадры не указаны, то браузер пользователя создает их, используя вычисляемые (первоначально заданные) значения анимируемого свойства.
Если несколько правил @keyframes определены с одним и тем же именем, сработает последнее в порядке документа, а все предыдущие проигнорируются.
После объявления правила @keyframes , мы можем ссылаться на него в свойстве animation:
H1 { font-size: 3.5em; color: darkmagenta; animation: shadow 2s infinite ease-in-out; }
Не рекомендуется анимировать нечисловые значения (за редким исключением), так как результат в браузере может быть непредсказуемым. Также не следует создавать ключевые кадры для значений свойств, не имеющих средней точки, например, для значений свойства color: pink и color: #ffffff , width: auto и width: 100px или border-radius: 0 и border-radius: 50% (в этом случае правильно будет указать border-radius: 0%).
1.1. Временная функция для ключевых кадров
Правило стиля ключевого кадра также может объявлять временную функцию, которая должна использоваться при перемещении анимации к следующему ключевому кадру.
Пример
@keyframes bounce { from { top: 100px; animation-timing-function: ease-out; } 25% { top: 50px; animation-timing-function: ease-in; } 50% { top: 100px; animation-timing-function: ease-out; } 75% { top: 75px; animation-timing-function: ease-in; } to { top: 100px; } }
Пять ключевых кадров указаны для анимации с именем «bounce». Между первым и вторым ключевым кадром (то есть между 0% и 25%) используется функция замедления. Между вторым и третьим ключевым кадром (то есть между 25% и 50%) используется функция плавного ускорения. И так далее. Элемент будет перемещаться вверх по страницу на 50px , замедляясь по мере того, как он достигает своей наивысшей точки, а затем ускоряясь, когда он падает до 100px . Вторая половина анимации ведет себя аналогичным образом, но только перемещает элемент на 25px вверх по странице.
Временная функция, указанная в ключевом кадре to или 100% , игнорируется.
2. Название анимации: свойство animation-name
Свойство animation-name определяет список применяемых к элементу анимаций. Каждое имя используется для выбора ключевого кадра в правиле, которое предоставляет значения свойств для анимации. Если имя не соответствует ни одному ключевому кадру в правиле, нет свойств для анимации, отсутствует имя анимации, анимация не будет выполняться.
Если несколько анимаций пытаются изменить одно и то же свойство, то выполнится анимация, ближайшая к концу списка имен.
Имя анимации чувствительно к регистру, не допускается использование ключевого слова none . Рекомендуется использовать название, отражающее суть анимации, при этом можно использовать одно или несколько слов, перечисленных через дефис - или символ нижнего подчеркивания _ .
Свойство не наследуется.
Синтаксис
Animation-name: none; animation-name: test-01; animation-name: -sliding; animation-name: moving-vertically; animation-name: test2; animation-name: test3, move4; animation-name: initial; animation-name: inherit;
3. Продолжительность анимации: свойство animation-duration
Свойство animation-duration определяет продолжительность одного цикла анимации. Задаётся в секундах s или миллисекундах ms . Если для элемента задано более одной анимации, то можно установить разное время для каждой, перечислив значения через запятую.
Свойство не наследуется.
Синтаксис
Animation-duration: .5s; animation-duration: 200ms; animation-duration: 2s, 10s; animation-duration: 15s, 30s, 200ms;
4. Временная функция: свойство animation-timing-function
Свойство animation-timing-function описывает, как будет развиваться анимация между каждой парой ключевых кадров. Во время задержки анимации временные функции не применяются.
Свойство не наследуется.
animation-timing-function | |
---|---|
Значения: | |
linear | Линейная функция, анимация происходит равномерно на протяжении всего времени, без колебаний в скорости. |
функции Безье | |
ease | Функция по умолчанию, анимация начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,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) | Позволяет вручную установить значения от 0 до 1. вы сможете построить любую траекторию скорости изменения анимации. |
пошаговые функции | |
step-start | Задаёт пошаговую анимацию, разбивая анимацию на отрезки, изменения происходят в начале каждого шага. Вычисляется в steps(1, start) . |
step-end | Пошаговая анимация, изменения происходят в конце каждого шага. Вычисляется в steps(1, end) . |
steps(количество шагов,положение шага) | Ступенчатая временная функция, которая принимает два параметра. Первый параметр указывает количество интервалов в функции. Это должно быть положительное целое число больше 0 , если вторым параметром не является jump-none — в этом случае оно должно быть положительным целым числом больше 1 . Второй параметр, который является необязательным, указывает позицию шага — момент, в котором начинается анимация, используя одно из следующих значений:
Со значением start анимация начинается в начале каждого шага, со значением end - в конце каждого шага с задержкой. Задержка вычисляется как результат деления времени анимации на количество шагов. Если второй параметр не указан, используется значение по умолчанию end . |
initial | |
inherit |
Синтаксис
Animation-timing-function: ease; animation-timing-function: ease-in; animation-timing-function: ease-out; animation-timing-function: ease-in-out; animation-timing-function: linear; animation-timing-function: step-start; animation-timing-function: step-end; animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); animation-timing-function: steps(4, end); animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1); animation-timing-function: initial; animation-timing-function: inherit;
С помощью пошаговой анимации можно создавать интересные эффекты, например, печатающийся текст или индикатор загрузки.
5. Повтор анимации: свойство animation-iteration-count
Свойство animation-iteration-count указывает, сколько раз проигрывается цикл анимации. Начальное значение 1 означает, что анимация будет воспроизводиться от начала до конца один раз. Это свойство часто используется в сочетании со значением alternate свойства animation-direction , которое заставляет анимацию воспроизводиться в обратном порядке в альтернативных циклах.
Свойство не наследуется.
Синтаксис
Animation-iteration-count: infinite; animation-iteration-count: 3; animation-iteration-count: 2.5; animation-iteration-count: 2, 0, infinite;
6. Направление анимации: свойство animation-direction
Свойство animation-direction определяет, должна ли анимация воспроизводиться в обратном порядке в некоторых или во всех циклах. Когда анимация воспроизводится в обратном порядке, временные функции также меняются местами. Например, при воспроизведении в обратном порядке функция ease-in будет вести себя как ease-out .
Свойство не наследуется.
animation-direction | |
---|---|
Значения: | |
normal | Все повторы анимации воспроизводятся так, как указано. Значение по умолчанию. |
reverse | Все повторы анимации воспроизводятся в обратном направлении от того, как они были определены. |
alternate | Каждый нечетный повтор цикла анимации воспроизводятся в нормальном направлении, каждый четный повтор воспроизводится в обратном направлении. |
alternate-reverse | Каждый нечетный повтор цикла анимации воспроизводятся в обратном направлении, каждый четный повтор воспроизводится в нормальном направлении. |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
Чтобы определить, является ли повтор цикла анимации четной или нечетной — количество повторов начинается с 1 .
Синтаксис
Animation-direction: normal; animation-direction: reverse; animation-direction: alternate; animation-direction: alternate-reverse; animation-direction: normal, reverse; animation-direction: alternate, reverse, normal; animation-direction: initial; animation-direction: inherit;
7. Проигрывание анимации: свойство animation-play-state
Свойство animation-play-state определяет, будет ли анимация запущена или приостановлена. Остановка анимации внутри цикла возможна через использование этого свойства в скрипте JavaScript. Также можно останавливать анимацию при наведении курсора мыши на объект — состояние:hover .
Свойство не наследуется.
Синтаксис
Animation-play-state: running; animation-play-state: paused; animation-play-state: paused, running, running; animation-play-state: initial; animation-play-state: inherit;
8. Задержка анимации: свойство animation-delay
Свойство animation-delay определяет, когда анимация начнется. Задается в секундах s или миллисекундах ms .
Свойство не наследуется.
Синтаксис
Animation-delay: 5s; animation-delay: 3s, 10ms;
9. Состояние элемента до и после воспроизведения анимации: свойство animation-fill-mode
Свойство animation-fill-mode определяет, какие значения применяются анимацией вне времени ее выполнения. Когда анимация завершается, элемент возвращается к своих исходным стилям. По умолчанию анимация не влияет на значения свойств, когда анимация применяется к элементу — animation-name и animation-delay . Кроме того, по умолчанию анимация не влияет на значения свойств после ее завершения — animation-duration и animation-iteration-count . Свойство animation-fill-mode может переопределить это поведение.
Свойство не наследуется.
animation-fill-mode | |
---|---|
Значения: | |
none | Значение по умолчанию. Состояние элемента не меняется до или после воспроизведения анимации. |
forwards | После того, как анимация заканчивается (как определено значением animation-iteration-count), анимация будет применять значения свойств к моменту окончания анимации. Если animation-iteration-count больше нуля, применяются значения для конца последней завершенной итерации анимации (а не значения для начала итерации, которое будет следующим). Если значение animation-iteration-count равно нулю, применяемыми значениями будут те, которые начнут первую итерацию (так же, как и в режиме animation-fill-mode: backwards;). |
backwards | В течение периода, определенного с помощью animation-delay , анимация будет применять значения свойств, определенные в ключевом кадре, которые начнут первую итерацию анимации. Это либо значения ключевого кадра from (когда animation-direction: normal или animation-direction: alternate), либо значения ключевого кадра to (когда animation-direction: reverse или animation-direction: alternate). |
both | Позволяет оставлять элемент в первом ключевом кадре до начала анимации (игнорируя положительное значение задержки) и задерживать на последнем кадре до конца последней анимации. |
Синтаксис
Animation-fill-mode: none; animation-fill-mode: forwards; animation-fill-mode: backwards; animation-fill-mode: both; animation-fill-mode: none, backwards; animation-fill-mode: both, forwards, none;
10. Краткая запись анимации: свойство animation
Все параметры воспроизведения анимации можно объединить в одном свойстве — animation , перечислив их через пробел:
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;
Для воспроизведения анимации достаточно указать только два свойства — animation-name и animation-duration , остальные свойства примут значения по умолчанию. Порядок перечисления свойств не имеет значения, единственное, время выполнения анимации animation-duration обязательно должно стоять перед задержкой animation-delay .
11. Множественные анимации
Для одного элемента можно задавать несколько анимаций, перечислив их названия через запятую:
Div {animation: shadow 1s ease-in-out 0.5s alternate, move 5s linear 2s;}
CSS3 анимация достаточно широко используется. Пришла пора разобраться даже самым начинающих сайтостроителям что же такое CSS анимация и как ее создать. Возможно Вы думаете что CSS3 анимация заключается в том, чтобы заставить двигаться блоки и это похоже на мультфильм. Но CSS анимация это не только перемещение элемента из одной точки в другую, а это еще искажение и другие трансформации. Чтобы это было понятно даже для начинающих — я расписал всё по шагам.
1. Основные свойства CSS3 анимации
Небольшой теоретический блок, из которого Вы поймете какие свойства CSS3 отвечают за анимацию, а также какие значения они могут принимать.
- animation-name — уникальное имя анимации (ключевых кадров, о них поговорим чуть ниже).
- animation-duration — длительность анимации в секундах.
- animation-timing-function — кривая изменения скорости анимации. На первый взгляд очень непонятно. Всегда легче показать на примере, а их Вы увидите ниже. Может принимать следующие значения: linear | ease | ease-in | ease-out | cubic-bezier(n,n,n,n) .
- animation-delay — задержка в секундах перед началом анимации.
- animation-iteration-count — количество повторов анимации. Задается либо просто числом, либо можно указать infinite и анимация будет выполняться бесконечно.
Здесь находятся лишь основные свойства, которых более чем достаточно, чтобы создать свою первую анимацию на CSS3.
Последнее, что нам нужно знать и понимать из теории — это то, как создавать ключевые кадры. Это делать также легко и делается это с помощью правила @keyframes , внутри которого указываются ключевые кадры. Синтаксис этого правила следующий:
Выше мы задали первый и последний кадр. Все промежуточные состояния рассчитаются АВТОМАТИЧЕСКИ!
2. Реальный пример анимации CSS3
Теория как обычно скучна и не всегда понятна. Намного проще увидеть всё на реальном примере, а лучше всего сделать своими руками на какой-нибудь тестовой HTML страничке.
При изучении языка программирования обычно пишут программу "Hello, world!", по которой можно понять какой синтаксис у этого языка и еще какие-нибудь базовые вещи. Но мы изучаем не язык программирования, а язык описания внешнего вида документа. Поэтому у нас будет свой "Hello, world!".
Вот что мы сделаем для примера:
пусть у нас какой-нибудь блок Вроде бы всё понятно — просто нужно сжать блок Сначала HTML разметка. Она очень простая, потому что мы работаем только с одним элементом на странице. А вот что находится в файле стилей: Как видите, мы указали только первый и последний ключевой кадр, а все промежуточные "построились" автоматически. Вот и готова Ваша первая CSS3 анимация. Чтобы закрепить полученные знания — создайте HTML документ и CSS файл, и там вставьте (а лучше руками напечатайте) код из примера. Тогда Вы уж точно всё поймете. Затем попробуйте сделать тоже самое с высотой блока (он должен уменьшаться по высоте), чтобы закрепить материал. Выше Вы узнали как можно легко создать CSS3 анимацию. Если попробовали своими руками это сделать, то уже поняли весь процесс и сейчас хотите узнать как можно создать более сложную и красивую анимацию. А ее создать действительно можно. Ниже есть 3 урока где анимация создается также, как в примере выше. Чем ближе мы приближаемся к началу работы интерфейса, тем понятней он становится для пользователя. В жизни практически ничего не происходит мгновенно - открывая банку газировки или закрывая глаза перед сном мы наблюдаем кучу промежуточных состояний, а не резкое “открыто/закрыто”, как это происходит в веб.
Анимация - это набор ключевых кадров или кейфреймов хранящихся в 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 секунды */
}
Повторное воспроизведение анимации:
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 аргумента и строит кривую распределения процесса анимации.
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 анимацаию (с примерами).
Во-вторых, гибкость, скоростью и простота внедрения CSS анимаций поможет “вдохнуть жизнь” в существующие или новые интерфейсы. Разработав общие и оригинальные подходы, разобравшись в особенности технологии можно делать уникальные юзабилити интерфейсы почти для всех проектов.
Надеюсь, в статье вы нашли полезную информацию для себя. Всем красивых сайтов. Не забывайте про анимашки:)
1
<div
class
=
"toSmallWidth"
>
div
>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.toSmallWidth
{
margin
:
20px
auto
;
/*внешние отступы сверху и снизу по 20px и выравнивание по середине*/
background
:
red
;
/*красный фон у блока*/
height
:
100px
;
/*высота блока 100px*/
width
:
800px
;
/*начальная ширина 800px*/
-webkit-animation-name
:
animWidthSitehere;
-webkit-animation-duration
:
5s;
/* свойство с префиксом для браузеров Chrome, Safari, Opera */
animation-name
:
animWidthSitehere;
/* указываем название ключевых кадров (находятся ниже)*/
animation-duration
:
5s;
/*задаем длительность анимации*/
}
/* ключевые кадры с префиксом для браузеров Chrome, Safari, Opera */
@-webkit-keyframes animWidthSitehere {
from {
width
:
800px
;
}
to {
width
:
100px
;
}
}
@keyframes animWidthSitehere {
from {
width
:
800px
;
}
/*первый ключевой кадр, где ширина блока 800px*/
to {
width
:
100px
;
}
/*последний ключевой кадр, где ширина блока 100px*/
}
3. Примеры анимации CSS3 посложнее
В своей статье поделюсь знаниями о анимации CSS и как с ней работать. Анимация придаёт сайтам динамичность и улучшает понимание их возможностей. Она оживляет веб-страницы и помогает взаимодействовать с пользователем. В отличие от переходов CSS3, анимация CSS базируется на ключевых кадрах. Которые позволяют воспроизводить и повторять эффекты на протяжении заданного времени, а также останавливать анимацию внутри цикла автоматически.
Взгляните на код ниже. Анимацию можно задать и таким образом:
Подключить анимацию к элементу можно так:
Так же можно группировать кейфреймы:
Используя animation-iteration-count
мы можем указывать число повторов анимации: 0, 1, 2, 3, и т.д. Или infinite для зацикливания:
Изучить подробнее или опробовать создание этих функций можно на сайте
http://cubic-bezier.com
И, наконец, анимацию можно разбить на набор отдельных значений (шагов) при помощи функции steps
которая принимает на вход количество шагов и направление (start или end
). На примере ниже анимация состоит из 5 шагов, последний из которых произойдёт прямо перед завершением анимации:
Одна из популярных библиотек для работы с анимациями -
animate.css
.
Может показаться, что трудности с которым сталкиваешься при работе с CSS анимациями не оправданы. Но это совершенно не так.
Во-первых, CSS это мощный инструмент улучшения взаимодействия интерфейса с пользователем. Он не сильно влияет на производительность юзеров. В отличии от JavaScript аналогов. Технология, за счет использования вычислительных мощностей GPU, дает возможность браузерам быстрее оптимизировать скорость отрисовки элементов.