Войти
s-lub » Учебники » CSS 3 » Анимация в CSS 3

Анимация в CSS 3

Анимация в CSS 3

Благодаря свойству @keyframes в CSS 3 стало возможным создавать полноценную анимацию без использования Adobe Flash и jаvascript.

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

Свойства анимации:

- @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, при данном значении анимация всегда проигрывается в нормальном порядке.

Для начала нужно создать контейнер (блок) в котором и будет воспроизводиться анимация.

Правильный синтаксис:

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

После этого в свойстве animation, в качестве значений нужно указать имя анимации, время и количество повторений.

Теперь посмотрим это на примерах:

<html>
<style type='text/css'>
@keyframes anim{
from {margin-left:3px;}
to {margin-left:500px;}
}
@-moz-keyframes anim{
from {margin-left:3px;}
to {margin-left:500px;}
}
@-webkit-keyframes anim{
from {margin-left:3px;}
to {margin-left:500px;}
}
#wrap1{
border:2px #000 solid;
background-color:#7F0055;
height:100px;
width:100px;
font-size:2em;
animation:anim 4s 3;
-webkit-animation:anim 4s 3;
}
</style>
<body>
<div id="wrap1"></div>
<p><b>Обратите внимание:</b> данная анимация будет повторяться 3 раза.</p>
</body>
</html>

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

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

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

Пример:

<html>
<style type='text/css'>
@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;}
}
@-moz-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;}
}
@-webkit-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 {
border:2px #000 solid;
background-color:#7F0055;
height:100px;
width:100px;
font-size:2em;
animation:anim 6s 3;
-webkit-animation:anim 6s 3;
}
</style>
<body>
<div id="wrap1"></div>
</body>
</html>

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


- Что такое CSS 3 и что в нём изменилось
- Фон и цвет в CSS 3
- Границы и рамки в CSS 3
- Текст и шрифт в CSS 3
- Создание прозрачных элементов и картинок
- Трансформирование в CSS 3
- Линейные градиенты в CSS 3
- Переходы в CSS 3
- Анимация в CSS 3
- Разбивание текста на столбцы
- Заключение