CSS3. Анимация. Animations
Очень полезное свойство animation (анимация) позволяет получать интересные визуальные анимационные эффекты самым естественным путем, чисто через CSS, без таких технологий как JavaScript, Java, Flash. Это свойство похоже на свойство transitions (преобразования), с методической точки зрения, лучше сначало изучить свойство transitions (преобразования), а затем уже переходить к изучению свойства animation (анимация).
Изучение свойства animation (анимация) начнем с небольшого практического примера под названием “Вечный двигатель”.
Для создания анимации в CSS3 необходимо использовать правило @keyframes.
Правило @keyframes определяет где и как создается анимация. Необходимо определить стили CSS внутри правила @keyframes, и анимация будет постепенно изменять свойства объекта от текущего стиля к новому.
В примере выше меняется цвет фона и положение объекта.
Теперь затронем теорию вопроса.
| NN | Свойство | Гугл Хром | FireFox | IE | Safari | Opera |
|---|---|---|---|---|---|---|
| 3 | @keyframes | -webkit- | 16 | 10 | -webkit- | 12.1 |
| 4 | animation | -webkit- | 16 | 10 | -webkit- | 12.1 |
| 5 | animation-name | -webkit- | 16 | 10 | -webkit- | 12.1 |
| 6 | animation-duration | -webkit- | 16 | 10 | -webkit- | 12.1 |
| 7 | animation-timing-function | -webkit- | 16 | 10 | -webkit- | 12.1 |
| 8 | animation-delay | -webkit- | 16 | 10 | -webkit- | 12.1 |
| 9 | animation-iteration-count | -webkit- | 16 | 10 | -webkit- | 12.1 |
| 10 | animation-direction | -webkit- | 16 | 10 | -webkit- | 12.1 |
| 11 | animation-play-state | -webkit- | 16 | 10 | -webkit- | 12.1 |
В таблице ниже представлены описания всех свойств, относящихся к animation (анимация).
| NN | Свойство | Описание |
|---|---|---|
| 1 | @keyframes | Спецификация анимации. |
| 2 | animation-name | Определяет имя анимации в правиле @keyframes. |
| 3 | animation-duration | Определяет продолжительность анимации в секундах или миллисекундах. По умолчанию 0. |
| 4 | animation-timing-function | Определяет каким способом будет проведен один цикл анимации. По умолчанию “ease”. |
| 5 | animation-delay | Определяет задержку перед стартом анимации в секундах. По умолчанию 0. |
| 6 | animation-iteration-count | Определяет количество анимационных прогонов. По умолчанию 1. |
| 7 | animation-direction | Определяет, должна ли анимация проходить в обратном порядке. По умолчанию “normal”. |
| 8 | animation-play-state | Определяет состояние анимации (“running”, “paused”). По умолчанию “running”. |
Для получения анимации необходимо сделать привязку, определив по меньшей мере два анимационных свойства:
- Определить имя анимации.
- Определить продолжительность анимации.
Анимация – это эффект, который позволяет объекту постепенно менять стиль с одного на другой.
Можно менять сколько угодно стилей, сколько угодно раз.
Определить, когда изменения должны произойти можно с помощью значений в процентах или используя ключевые слова “from” и “to”, что является синонимами для 0% и 100% соответственно.
0% – это начало анимации, 100% – когда анимация заканчивается.
Гораздо лучше использовать селекторы 0% и 100% (а не “from” и “to”), т.к. браузеры лучше понимают именно формат 0% и 100%.
Рассмотрим классы объекта, чтобы совсем все стало понятно.
.sample_052 {
width:200px;
height:50px;
background:red;
position:relative;
animation-name:for_sample_052;
animation-duration:12s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
/* animation-direction:alternate; */
animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:for_sample_052;
-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;
opacity:0.8;
padding:10px;
margin:10px;
text-align:center;
border:3px solid #B7F777;
border-radius:10px;
box-shadow: 6px 7px 5px #979797;
}
Правило @keyframes определено так:
@keyframes for_sample_052 {
0% {background:red; color:yellow; left:0px; top:0px;}
40% {background:yellow; color:blue; left:500px; top:0px;}
50% {background:blue; color:green; left:500px; top:100px;}
90% {background:green; color:red; left:0px; top:100px;}
100% {background:red; color:black; left:0px; top:0px;}
}
@-webkit-keyframes for_sample_052 /* Safari and Chrome */ {
0% {background:red; color:yellow; left:0px; top:0px;}
40% {background:yellow; color:blue; left:500px; top:0px;}
50% {background:blue; color:green; left:500px; top:100px;}
90% {background:green; color:red; left:0px; top:100px;}
100% {background:red; color:black; left:0px; top:0px;}
}
Практическое применение возможности анимации без программирования на JavaScript и др. технологиях разумно при публикации рекламных объявлений.
Источник
