САМОУЧКА Сайт для тех, кто хочет научиться

Главная

О Нас

Публикации

Связь

Наши публикации

HTML для новичков

XHTML

CSS для новичков

CSS 3

JavaScript

<Предыдущая Следующая>

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

CSS3 Анимация

Обратите внимание: свойства анимации поддерживаются браузерами IE10+, Firefox и Opera. Для браузеров Chrome и Safariперед свойством требуется добавить префикс -webkit.

Для создания анимации в CSS3 используется свойство @keyframes.

Данное свойство представляет собой контейнер, в который должны помещаться различные свойства оформления.

Синтаксис:

 
@keyframes имяАнимации
{
from {CSS свойства} /* Оформление элемента перед началом анимации */
to {CSS свойства} /* Оформление элемента после завершения анимации */
}
 

После того, как анимация была создана необходимо добавить к элементу, который Вы хотите анимировать CSS3 свойство animation и указать в нем имя анимации (1 значение) и время (2 значение), в течении которого она будет выполняться.

Также Вы можете устанавливать количество повторов анимации (3 значение).

Пример

 
@keyframes anim {
from {margin-left:3px;}
to {margin-left:500px;}
}
 
#wrap1 {
animation:anim 4s 3;
}
 

Ход выполнения анимации

Вы можете определять ход выполнения анимации не только с помощью ключевых слов from и to (которые использовались в предыдущем примере), но и с помощью %.

С помощью % Вы можете более точно контролировать ход выполнения анимации, например можно указать,
 что определенный элемент в начале анимации (0%) должен быть белым к середине (50%) должен окрашиваться в оранжевый цвет, а к концу (100%) становиться черным.

Пример

 
@keyframes anim {
0% {margin-left:3px;margin-top:3px;background-color:#7F0055;}
30% {margin-left:3px;margin-top:250px;background-color:#7F0055;}
60% {margin-left:500px;margin-top:250px;background-color:black;}
100% {margin-left:3px;margin-top:3px;background-color:#7F0055;}
}
 
#wrap1 {
animation:anim 6s 3;
}
 

CSS3 свойства анимации

Свойство	Описание
@keyframes	Контейнер для определения анимации.
animation	Позволяет задать все значения для настройки выполнения анимации за одно определение.
animation-name	Позволяет указать имя анимации.
animation-duration	Позволяет задать скорость выполнения анимации в секундах (по умолчанию имеет значение 0).
animation-timing-function	Позволяет задать функцию смягчения отвечающую за плавность выполнения анимации (по умолчанию имеет значение ease).
animation-delay	Позволяет задать задержку перед началом выполнения анимации (по умолчанию имеет значение 0).
animation-iteration-count	Позволяет задать количество повторов анимации (по умолчанию имеет значение 1).
animation-direction	При значении alternate в нечетные разы (1,3,5 ...) анимация будет проигрываться в нормальном, а в четные (2,4,6 ...) в обратном порядке. По умолчанию данное свойство имеет значение normal, при данном значении анимация всегда проигрывается в нормальном порядке.

<Предыдущая Следующая>

Последние добавления

HTML для новичков

XHTML

CSS для новичков