CSS3 Анимация

« Назад

CSS3 Анимация

С CSS3 мы можем создавать анимацию, которая может заменить анимированные изображения, Flash анимацию и скрипты JavaScript во многих случаях.

CSS3
Анимация

CSS3 Правило @keyframes

Чтобы создавать анимацию в CSS3, вы должны изучить правило @keyframes.

Правило @keyframes используется для создания анимации. Укажите CSS стиль внутри правила @keyframes и анимация будет воспроизводиться, плавно изменяя текущий стиль на новый. Слово keyframes можно перевести с английского как "ключевые кадры", что вполне соответствует сути этого правила, в чем вы убедитесь ниже.

Поддержка Браузерами

Свойство	Поддержка Браузерами
@keyframes
animation

Internet Explorer и Opera пока еще не поддерживают правило @keyframes и свойство animation.

Firefox требует приставки -moz-, тогда как Chrome и Safari требуют приставки -webkit-.

Пример

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari и Chrome */
{
from {background: red;}
to {background: yellow;}
}

CSS3 свойство animation

Когда анимация создана в правиле @keyframe, привяжите ее к селектору, иначе анимация не произведет эффекта.

Привязка анимации к селектору осуществляется указанием по крайней мере двух следующих свойств CSS3 анимации:

Указание названия анимации
Указание продолжительности анимации

Пример

Привязка анимации "myfirst" к элементу div, продолжительность: 5 секунд:

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari и Chrome */
}

Попробуйте сами »

Замечание: Вы должны определить название (имя) и продолжительность анимации. Если продолжительность пропущена, анимация не запустится, так как значение по умолчанию равно 0.

Что такое Анимация CSS3?

Анимация - это эффект, который позволяет элементу плавно изменять один стиль на другой.

Вы можете изменять столько стилей, сколько захотите, и столько раз, сколько вам заблагорассудится.

Укажите, когда должно произойти изменение в процентах (от общей продолжительности одного цикла), или ключевые слова "from" и "to", которые обозначают 0% и 100% соответственно.

0% - это начало анимации, 100% - это завершение (когда анимация полностью завершена).

Для наилучшей поддержки браузерами, всегда следует указывать селекторы 0% и 100%.

Пример

Изменить цвет фона, когда анимация завершена на 25%, 50% и снова, когда анимация будет полностью (на 100%) завершена:

@keyframes myfirst
{
0%   {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari и Chrome */
{
0%   {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

Попробуйте сами »

Пример

Изменить цвет фона и положение:

@keyframes myfirst
{
0%   {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari и Chrome */
{
0%   {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

Попробуйте сами »

CSS3 Animation Properties

Следующая таблица перечисляет правило @keyframes и все свойства анимации:

Свойство	Описание	CSS
@keyframes	Определяет анимацию	3
animation	Стенографическое (сокращенное) свойство для всех свойств анимации, за исключением свойства animation-play-state	3
animation-name	Указывает название анимации @keyframes	3
animation-duration	Указывает, сколько секунд (миллисекунд) требуется для завершения одного полного цикла анимации. По умолчанию 0	3
animation-timing-function	Описывает, как будет изменяться скорость проигрывания анимации в течение одного цикла. Default "ease"	3
animation-delay	Указывает, когда начнется анимация (задержка анимации). По умолчанию 0	3
animation-iteration-count	Указывает, сколько раз будет воспроизводиться анимация. По умолчанию один раз	3
animation-direction	Указывает, будет или нет анимация проигрываться в обратном направлении (от конца к началу) на четных циклах воспроизведения. По умолчанию равно "normal"	3
animation-play-state	Указывает, запущена анимация или на паузе. Значение по умолчанию "running"	3

Два примера ниже устанавливает все свойства анимации:

Пример

Запустить анимацию под названием myfirst с установкой всех анимационных свойств:

div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
/* Safari и Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}

Попробуйте сами »

Пример

Та же анимация, что и выше, с использованием сокращенного свойства анимации:

div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari и Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
}

Попробуйте сами »

« Назад

CSS3 Уроки

CSS3 Справочники

CSS3 Анимация