Рейтинг@Mail.ru
УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS РЕКЛАМА

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-.


Opera Safari Chrome Firefox Internet Explorer

Пример

@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 анимации:

  • Указание названия анимации
  • Указание продолжительности анимации
Opera Safari Chrome Firefox Internet Explorer

Пример

Привязка анимации "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%.

Opera Safari Chrome Firefox Internet Explorer

Пример

Изменить цвет фона, когда анимация завершена на 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;}
}

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

Opera Safari Chrome Firefox Internet Explorer

Пример

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

@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

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

Opera Safari Chrome Firefox Internet Explorer

Пример

Запустить анимацию под названием 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;
}

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

Opera Safari Chrome Firefox Internet Explorer

Пример

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

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;
}

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





« Назад Далее »
© 2011-2017 Уроки CSS
Рейтинг@Mail.ru