CSS3 анимация достаточно широко используется. Пришла пора разобраться даже самым начинающих сайтостроителям что же такое CSS анимация и как ее создать. Возможно Вы думаете что CSS3 анимация заключается в том, чтобы заставить двигаться блоки и это похоже на мультфильм. Но CSS анимация это не только перемещение элемента из одной точки в другую, а это еще искажение и другие трансформации. Чтобы это было понятно даже для начинающих — я расписал всё по шагам.
Небольшой теоретический блок, из которого Вы поймете какие свойства CSS3 отвечают за анимацию, а также какие значения они могут принимать.
Здесь находятся лишь основные свойства, которых более чем достаточно, чтобы создать свою первую анимацию на CSS3.
Последнее, что нам нужно знать и понимать из теории — это то, как создавать ключевые кадры. Это делать также легко и делается это с помощью правила @keyframes , внутри которого указываются ключевые кадры. Синтаксис этого правила следующий:
Выше мы задали первый и последний кадр. Все промежуточные состояния рассчитаются АВТОМАТИЧЕСКИ!
Теория как обычно скучна и не всегда понятна. Намного проще увидеть всё на реальном примере, а лучше всего сделать своими руками на какой-нибудь тестовой HTML страничке.
При изучении языка программирования обычно пишут программу "Hello, world!", по которой можно понять какой синтаксис у этого языка и еще какие-нибудь базовые вещи. Но мы изучаем не язык программирования, а язык описания внешнего вида документа. Поэтому у нас будет свой "Hello, world!".
Вот что мы сделаем для примера:
пусть у нас какой-нибудь блок Вроде бы всё понятно — просто нужно сжать блок Сначала HTML разметка. Она очень простая, потому что мы работаем только с одним элементом на странице. А вот что находится в файле стилей: Как видите, мы указали только первый и последний ключевой кадр, а все промежуточные "построились" автоматически. Вот и готова Ваша первая CSS3 анимация. Чтобы закрепить полученные знания — создайте HTML документ и CSS файл, и там вставьте (а лучше руками напечатайте) код из примера. Тогда Вы уж точно всё поймете. Затем попробуйте сделать тоже самое с высотой блока (он должен уменьшаться по высоте), чтобы закрепить материал. Выше Вы узнали как можно легко создать CSS3 анимацию. Если попробовали своими руками это сделать, то уже поняли весь процесс и сейчас хотите узнать как можно создать более сложную и красивую анимацию. А ее создать действительно можно. Ниже есть 3 урока где анимация создается также, как в примере выше. ВНИМАНИЕ! Поскольку в этом уроке мы с вами разберем анимацию, на картинках я вам пример ее работы продемонстрировать не смогу, поэтому смело открывайте редактор для кода и записывайте туда код, приведенный в этот статье. Итак, прежде всего нужно начать с того, как ее создавать. Вы наверняка привыкли к тому, что любая вещь в css реализуется прописыванием нужному селектору нужных свойств с соответствующими значениями. Так вот, при создании анимации только этим не обойтись. Схема выглядит следующим образом: Создаются сами эффекты переходов с помощью @keyframes Нужному элементу задается эта самая анимация, а также ее параметры (все это с помощью свойств и их значений). Итак, для начала нам нужно описать нужные изменения в @keyframes, давайте подробнее разберем, как с ними работать. Собственно, мне проще будет объяснить вам все на готовом примере, пусть и очень простом. Вот он (код добавляется в css-файл): @keyframes pulse{
0%{font-size: 50px;}
50%{font-size: 60px;}}
100%{font-size: 50px;}} @
keyframes
pulse
{
0
%
{
font
-
size
:
50px
;
}
50
%
{
font
-
size
:
60px
;
}
}
Итак, после ключевика @keyframes идет произвольное слово, которое будет выступать названием анимации. В нашем случае это “pulse”. Далее открываются фигурные скобки, в которых записываются нужные правила. Проценты, это так называемые временные отметки, на которых к элементу будут добавляться указанные свойства. В нашем случае записанное означает следующее: в самом начале выполнения размер шрифта будет составлять 50 пикселей, в ее середине он увеличиться до 60-ти, а в конце опять уменьшиться до начального размера. Ключевые слова from и to могут заменить процентную запись, они обозначают 0% и 100% соответственно, то есть начало и конец воспроизведения. Пока у нас просто код, который формирует анимационный эффект, но он нигде не применяется. Если вы обновите вашу веб-страницу, на ней ничего не изменится. Соответственно, чтобы применить анимацию, нужно выполнить два действия: Выбрать элемент, для которого она будет применяться Связать его с правилами, описанными через @keyframes (посредством имени), а также задать дополнительные настройки если это будет необходимо. В своем html-файле я создал блок с классом shadow, в котором располагается простая строка текста. Наша цель – применить анимационные эффекты, описанные нами ранее, к этому текстовому элементу. Есть два обязательных свойства, которые нужно указать в таком случае, чтобы все заработало. Во-первых, это имя, которое мы писали в keyframes. Во-вторых, это длительность анимации, потому что без этого параметра браузер просто не сможет ее воспроизвести. Итак, помимо тех стилей, что уже есть у нашего блока, добавляем новые: animation-name: pulse;
animation-duration: 2s; Таким образом, все повториться 4 раза, после чего прекратиться. Как вы понимаете, вместо четырех можно вписать любое число. Реализуется очень легко с помощью этого же свойства. На самом деле вы можете просто задеть количество повторений в пару тысяч, этого вполне хватит, но теоретически наша анимация не будет повторяться бесконечно. animation-iteration-count: infinite; animation
-
iteration
-
count
:
infinite
;
Все, теперь мы сделали бесконечный повтор. Проверять так ли это, просидев всю жизнь за монитором, я не советую. Просто это применяется в тех случаях, когда вы хотите, чтобы эффект постоянно повторялся и не исчезал. Если он ненавязчивый и не отвлекает пользователя, то почему бы и нет. По умолчанию воспроизведение начинается после полной загрузки страницы. Этим поведением можно управлять с помощью свойства animation-delay. Его значение задается в секундах. Еще одно интересное свойство – animation-direction. По умолчанию стоит как нормальное, если поставить reverse, то все описанные кадры будут выполняться в обратном направлении. Давайте проверим, в чем разница. Для этого я немного изменил эффект, добавив еще один кадр. @keyframes pulse{
0%{font-size: 50px;}
50%{font-size: 60px;}
70%{font-size: 80px;}
100%{font-size: 50px;}} @
keyframes
pulse
{
0
%
{
font
-
size
:
50px
;
}
50
%
{
font
-
size
:
60px
;
}
70
%
{
font
-
size
:
80px
;
}
100
%
{
font
-
size
:
50px
;
}
}
Итак, при нормальном направлении в первой половине анимации размер шрифта увеличиться до 60 пикселей, потом он резко увеличиться еще раз, уже до 80-ти, после чего вернется в исходное положение. Рис. 2. Исходный размер текста
Рис. 3. Размер шрифта почти в конце анимации, перед резким возвращением к исходному состоянию.
Теперь задаем: animation-direction: reverse; animation
-
direction
:
reverse
;
Все перевернулось наоборот. Сначала текст увеличиться аж на 30 пикселей, до 80-ти, оставшуюся часть анимации он будет плавно уменьшаться, в конце концов вернув себе прежние размеры. Все просто. А это, пожалуй, одна из самых интересных настроек, в экспериментах с которой можно провозиться долгое время. По умолчанию все изменения выполняются с одинаковой скоростью. Такой тип выполнения анимации называется линейным, кроме него есть и другие. ). CSS3 предоставляет нам еще один более мощный инструмент создания анимации, который не ограничивается выполнением одного перехода, а позволяет создавать неограниченное количество таких переходов
. Другими словами, анимация позволяет нам переходить от одного
состояния (набора свойств) ко второму
, от второго
к третьему
, и даже при необходимости воспроизводить анимацию в обратном порядке, когда количество переходов завершено. По аналогии с переходными эффектами, для проигрывания анимации необходимо инициировать её воспроизведение, будь то первоначальная загрузка страницы, или получение фокуса элементом, наведение указателя мыши на элемент и так далее. Давайте рассмотрим из чего же состоит процесс создания анимации в CSS. Для начала Вам необходимо определить ключевые кадры анимации. Что из себя представляет ключевой кадр? Представьте себе элемент, который позиционируется слева от окна браузера и Вам необходимо осуществить его анимацию до середины окна и вернуть его в первоначальное положение. Для этой анимации нам потребуется три ключевых кадра: После того как необходимые ключевые кадры определены, на браузер пользователя будет возлагаться задача прорисовывать все промежуточные фазы, которые мы определили с помощью ключевых кадров. То есть, задача прорисовывать элемент в этих промежутках лежит исключительно на браузере, с нашей стороны необходимо только указать эти точки анимации, или другими словами, мы должны сообщить браузеру как он должен изменить один стиль к другому между ключевыми кадрами. Следующим шагом нам необходимо назначить анимацию интересующему нас элементу, или элементам. При этом существует возможность указать для каждого элемента свою индивидуальную настройку анимации. Далее в этой статье мы с Вами подробно рассмотрим, как установить задержку анимации, как задать количество циклов анимации, установить её продолжительность, указать её скорость и направление, состояние анимации на текущий момент и даже определить стиль для элемента в тот момент, когда анимация не воспроизводится. Прежде чем мы перейдем к созданию анимации, хочу обратить Ваше внимание на текущую поддержку свойств анимации браузерами: Результат нашего примера: Рассмотрим следующий пример в котором мы создадим несколько различных анимаций и назначим их одному элементу. В этом примере мы создали несколько анимаций, в которых происходит постепенное увеличение ширины элемента, изменение цвета заднего фона, отрицательный наклон элемента относительно оси X
(горизонтальная ось) к середине анимации и уменьшении элемента к первоначальному размеру элемента к концу анимации, которое сопровождается изменением цвета заднего фона и наклоном элемента по оси X
в обратную сторону. Результат нашего примера: По умолчанию любая анимация в CSS будет воспроизведена только один раз
. Благодаря свойству animation-iteration-count мы сможем указывать сколько раз будет проигрываться анимационный цикл, это может быть, как произвольное число раз, либо указать, что анимация будет воспроизводиться бесконечно, в некоторых случаях это очень полезно. Обратите внимание на то, что запрещается указывать отрицательные значения
по объективным причинам, но допускается указывать не целые значения, при этом будет проигрываться только часть анимационного цикла - пропорционально указанному значению (например, значение 1.5
соответствует воспроизведению анимационного цикла полтора раза). Рассмотрим следующий пример: В этом примере мы создали простую анимацию, в которой с помощью CSS свойства top смещаем элементы с относительным позиционированием относительно верхнего края текущей позиции, изменяя при этом цвет заднего фона элемента. CSS3-анимация
придаёт сайтам динамичность. Она оживляет веб-страницы, улучшая взаимодействие с пользователем. В отличие от CSS3-переходов, создание анимации базируется на ключевых кадрах, которые позволяют автоматически воспроизводить и повторять эффекты на протяжении заданного времени, а также останавливать анимацию внутри цикла. CSS3-анимация может применяться практически для всех html-элементов, а также для псевдоэлементов:before и:after . Список анимируемых свойств приведен на странице. При создании анимации не стоит забывать о возможных проблемах с производительностью, так как на изменение некоторых свойств требуется много ресурсов. IE:
10.0 Ключевые кадры используются для указания значений свойств анимации в различных точках анимации. Ключевые кадры определяют поведение одного цикла анимации; анимация может повторяться ноль или более раз. Ключевые кадры указываются с помощью правила @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%). Правило стиля ключевого кадра также может объявлять временную функцию, которая должна использоваться при перемещении анимации к следующему ключевому кадру. Пример
@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% , игнорируется. Свойство 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;
Свойство animation-duration определяет продолжительность одного цикла анимации. Задаётся в секундах s или миллисекундах ms . Если для элемента задано более одной анимации, то можно установить разное время для каждой, перечислив значения через запятую. Свойство не наследуется. Синтаксис
Animation-duration: .5s;
animation-duration: 200ms;
animation-duration: 2s, 10s;
animation-duration: 15s, 30s, 200ms;
Свойство animation-timing-function описывает, как будет развиваться анимация между каждой парой ключевых кадров. Во время задержки анимации временные функции не применяются. Свойство не наследуется. Со значением start анимация начинается в начале каждого шага, со значением end - в конце каждого шага с задержкой. Задержка вычисляется как результат деления времени анимации на количество шагов. Если второй параметр не указан, используется значение по умолчанию end . Синтаксис
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;
С помощью пошаговой анимации можно создавать интересные эффекты, например, печатающийся текст или индикатор загрузки. Свойство 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;
Свойство animation-direction определяет, должна ли анимация воспроизводиться в обратном порядке в некоторых или во всех циклах. Когда анимация воспроизводится в обратном порядке, временные функции также меняются местами. Например, при воспроизведении в обратном порядке функция ease-in будет вести себя как ease-out . Свойство не наследуется. Чтобы определить, является ли повтор цикла анимации четной или нечетной — количество повторов начинается с 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;
Свойство 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;
Свойство animation-delay определяет, когда анимация начнется. Задается в секундах s или миллисекундах ms . Свойство не наследуется. Синтаксис
Animation-delay: 5s;
animation-delay: 3s, 10ms;
Свойство animation-fill-mode определяет, какие значения применяются анимацией вне времени ее выполнения. Когда анимация завершается, элемент возвращается к своих исходным стилям. По умолчанию анимация не влияет на значения свойств, когда анимация применяется к элементу — animation-name и animation-delay . Кроме того, по умолчанию анимация не влияет на значения свойств после ее завершения — animation-duration и animation-iteration-count . Свойство animation-fill-mode может переопределить это поведение. Свойство не наследуется. Синтаксис
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;
Все параметры воспроизведения анимации можно объединить в одном свойстве — animation , перечислив их через пробел: Для воспроизведения анимации достаточно указать только два свойства — animation-name и animation-duration , остальные свойства примут значения по умолчанию. Порядок перечисления свойств не имеет значения, единственное, время выполнения анимации animation-duration обязательно должно стоять перед задержкой animation-delay . Для одного элемента можно задавать несколько анимаций, перечислив их названия через запятую: Div {animation: shadow 1s ease-in-out 0.5s alternate, move 5s linear 2s;}
Мы собрали для вас подборку лучших примеров JQuery
анимации и CSS3
. Вы можете посмотреть исходный код, чтобы понять, как анимируется каждый из примеров. Работающие часы на CSS3
, в примере используется анимация и фигуры CSS
, без изображений или JavaScript
: Демо-версия
Скачать
В данном примере используется только анимация CSS3
: Демо-версия
Скачать
Демо-версия
Скачать
Демо-версия
Скачать
Отличная идея и сочетание двух концепций. А немного доработав масштабирование и анимацию, можно удивительный результат! Демо-версия
Скачать
Демо-версия
Скачать
3D диаграмма
, созданная с помощью HTML
и CSS3-преобразований
. Тени созданы с помощью градиентов CSS
, анимация — с помощью переходов. AngularJS
используется для обновления данных: Демо-версия
Скачать
Демо-версия
Скачать
Демо-версия
Скачать
Демо-версия
Скачать
Пример, который я создал на CSS3
. Можно было бы, конечно, уменьшить количество div
, использованных для создания частей тела. Также стоило бы оптимизировать пример и добавить класс JQuery с анимацией
: Демо-версия
Скачать
Демо-версия
Скачать
Демо-версия
Скачать
Это CSS3-версия
анимации. Клубы дыма создаются без изображений, а анимация задается без использования JavaScript
и JQuery
эффектов анимации: Демо-версия
Скачать
Демо-версия
Скачать
Демо-версия
Скачать
Демо-версия
Скачать
Демо-версия
Скачать
Демо-версия
Скачать
Демо-версия
Скачать
Демо-версия
Скачать
Демо-версия
Скачать
Линейный график на HTML
и CSS3
. При наведении курсора мыши на раздел отображается его название. Данные заполняются и обновляются с помощью AngularJS
. Преобразование вращения вручную применено к точкам графика, а анимация задается с помощью переходов CSS3
: Демо-версия
Скачать
Демо-версия
Скачать
Демо-версия
Скачать
Анимации JQuery
пример, иллюстрирующий функцию тайминга анимации: steps()
в сочетании с листом спрайтов: Анимация с применением SVG
, которая может пригодиться при разработке анимации траектории: Скачать / Дополнительная информация
Скачать / Дополнительная информация
Ниже приводятся пример с использованием листов спрайтов с пояснениями без JQuery
эффектов анимации: Скачать / Дополнительная информация
Скачать / Дополнительная информация
Скачать / Дополнительная информация
Скачать / Дополнительная информация
Скачать / Дополнительная информация
Пример того, как анимировать SVG
. Для демонстрационных целей я использовал иконки «Small Icons
» Ника Фроста
и Грега Лапена
: Скачать / Дополнительная информация
Это еще одна CSS3 анимация
, созданная с использованием параллакса CSS3
и кейфреймов, но без JQuery анимации
: Скачать / Дополнительная информация
Скачать / Дополнительная информация
Скачать / Дополнительная информация
Небольшой пример синхронизации анимации, в которой вокруг экрана перемещается шар, с помощью setTimeout
: Скачать / Дополнительная информация
Скачать / Дополнительная информация
Простая JQuery
анимация: Скачать / Дополнительная информация
Скачать / Дополнительная информация
Скачать / Дополнительная информация
Скачать / Дополнительная информация
В процессе разработки использовались 3D-эффекты CSS3
и JQuery
анимация текста. Пример работает в Google Chrome 28.0
и Firefox 22.0
. В то же время анимация не работает в IE 10
из-за какой-то ошибки доступа JQuery
, которую я не удосужился исправить: Скачать / Дополнительная информация
Скачать / Дополнительная информация
Анимация гонок на чистом CSS / HTML
: Скачать / Дополнительная информация
Скачать / Дополнительная информация
Этот анимированный логотип без JQuery эффектов
анимации выглядит очень элегантно: Скачать / Дополнительная информация
Анимированный логотип компании на чистом HTML / CSS3
: Скачать / Дополнительная информация
Скачать / Дополнительная информация
Скачать / Дополнительная информация
Скачать / Дополнительная информация
Это небольшой набор анимированных иконок погоды на CSS
. Обратите внимание, что большая часть анимации создается с помощью псевдо-элементов и JQuery
анимации: Скачать / Дополнительная информация
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 посложнее
Основы создания
Синтаксис @keyframes
Применяем анимацию в действии
Пробуем
Бесконечная анимация в css3
Задержка перед началом
Направление
Форма анимации
Этапы создания анимации
Opera
IExplorer
Edge
43.0
4.0
-webkit-
16.0
5.0
-moz-
30.0
15.0
-webkit-
9.0
4.0
-webkit-
10.0
12.0
Определение ключевых кадров
Количество анимационных циклов
Введение в CSS-анимацию
Поддержка браузерами
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:
441. Ключевые кадры
1.1. Временная функция для ключевых кадров
2. Название анимации: свойство animation-name
3. Продолжительность анимации: свойство animation-duration
4. Временная функция: свойство 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 . Второй параметр, который является необязательным, указывает позицию шага — момент, в котором начинается анимация, используя одно из следующих значений:
initial
inherit
5. Повтор анимации: свойство animation-iteration-count
6. Направление анимации: свойство animation-direction
animation-direction
Значения:
normal
Все повторы анимации воспроизводятся так, как указано. Значение по умолчанию.
reverse
Все повторы анимации воспроизводятся в обратном направлении от того, как они были определены.
alternate
Каждый нечетный повтор цикла анимации воспроизводятся в нормальном направлении, каждый четный повтор воспроизводится в обратном направлении.
alternate-reverse
Каждый нечетный повтор цикла анимации воспроизводятся в обратном направлении, каждый четный повтор воспроизводится в нормальном направлении.
initial
Устанавливает значение свойства в значение по умолчанию.
inherit
Наследует значение свойства от родительского элемента.
7. Проигрывание анимации: свойство animation-play-state
8. Задержка анимации: свойство animation-delay
9. Состояние элемента до и после воспроизведения анимации: свойство 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
Позволяет оставлять элемент в первом ключевом кадре до начала анимации (игнорируя положительное значение задержки) и задерживать на последнем кадре до конца последней анимации.
10. Краткая запись анимации: свойство animation
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;11. Множественные анимации
Работающие часы на основе CSS3
Анимированные облака на CSS3
Анимированные иконки погоды на CSS3
Анимации загрузки на CSS3
3D вращающаяся планета на основе CSS3
Эффект анимации текста
3D анимированная диаграмма
JQuery эффект анимации снега
CSS3-анимации загрузки
Анимированная иконка гамбургер-меню на CSS3
AT-AT (шагающий броневик из Звездных войн) на CSS3
Gran Turismo
3D Солнечная система
Анимация дыма
Анимированный логотип
IE10 3D куб
Анимация языков пламени на основе CSS3
Логотип Бэтмена на -webkit- CSS3 анимация
Концепт дизайна погодного приложения на основе CSS
Анимация природы на CSS3
Гуляющий кот (цикл без JQuery анимации)
3D-терминал на CSS3
Анимированный график на CSS3
Вращающиеся 3D HTML-формы с помощью CSS3
Анимации индикатора подключения на основе CSS3
Steps-анимация на Jquery
Продвинутая анимация траектории
Анимации прокручивания с использованием wow.js
Анимация с использованием листов спрайтов на CSS
Анимированный логотип для Herr Brueckers
Анимация рисования контура
Бесконечная анимация галереи на основе анимации блока JQuery
Анимированные круги с использованием CSS / SVG
SVG-анимация с помощью CSS
CSS3 параллакс анимация боевых истребителей от MySkins Studio
Анимированный SVG-логотип
Плоская анимированная круговая иконка на основе CSS3
Анимация с setTimeout
SVG-анимация солнца с использованием CSS
JQuery-анимация
CSS-анимация орбиты Земли
Анимация летящей птицы на CSS3
Анимация атома на основе CSS3
3D-анимация часов с использованием JS
Анимированное Лондонское обзорное колесо из двух элементов
Анимация Drag Race
Анимированный праздничный торт
Анимированный логотип
Анимированный логотип компании на основе CSS3
Анимированная иконка камеры
Анимация оранжевого автомобиля
Анимированная иконка Wi-Fi
Анимированные адаптивные CSS- иконки погоды