CSS Анимации

Анимации

Для создания анимации в CSS-3 используется свойство @keyframes. Данное свойство представляет собой контейнер, в который должны помещаться различные свойства оформления.

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

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

1.box {
2  animation: move 15s infinite linear;
3}

move — имя анимации

15s — длительность

infinite — бесконечное повторение

linear — тип движения

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

1@keyframes anim {
20% {margin-left:3px;margin-top:3px;background-color:#7F0055;}
330% {margin-left:3px;margin-top:250px;background-color:#7F0055;}
460% {margin-left:500px;margin-top:250px;background-color:black;}
5100% {margin-left:3px;margin-top:3px;background-color:#7F0055;}
6}
7
8#wrap1 {
9animation:anim 6s 3;
10}

Также (для поддержки мультибраузерности) Вам нужно указывать дублирующие анимации:

1@keyframes myfirst
2{
3…
4}
5
6@-moz-keyframes myfirst /* Firefox */
7{
8…
9}
10
11@-webkit-keyframes myfirst /* Safari и Chrome */
12{
13…
14}

И соответствующие свойства:

1div
2{
3animation-name: myfirst;
4animation-duration: 5s;
5animation-timing-function: linear;
6animation-delay: 2s;
7animation-iteration-count: infinite;
8animation-direction: alternate;
9animation-play-state: running;
10/* Firefox: */
11-moz-animation-name: myfirst;
12-moz-animation-duration: 5s;
13-moz-animation-timing-function: linear;
14-moz-animation-delay: 2s;
15-moz-animation-iteration-count: infinite;
16-moz-animation-direction: alternate;
17-moz-animation-play-state: running;
18/* Safari и Chrome: */
19-webkit-animation-name: myfirst;
20-webkit-animation-duration: 5s;
21-webkit-animation-timing-function: linear;
22-webkit-animation-delay: 2s;
23-webkit-animation-iteration-count: infinite;
24-webkit-animation-direction: alternate;
25-webkit-animation-play-state: running;
26}

Практика 👩‍💻👨‍💻

Цели:

1. Освоить различные CSS-3 свойства.
2. Получить навыки применения CSS анимации.

Задача: Разработать анимированную сцену, используя лишь возможности CSS и HTML (без Javascript).