Курс CSS. Урок 52. CSS3. Анимация. Animations.
Очень полезное свойство animation (анимация) позволяет получать интересные визуальные анимационные эффекты самым естественным путем, чисто через CSS, без таких технологий как JavaScript, Java, Flash. Это свойство похоже на свойство transitions (преобразования), рассмотренное нами на предыдущем уроке, см
урок 51,
с методической точки зрения, лучше сначало изучить свойство transitions (преобразования), а затем уже переходить к изучению свойства animation (анимация).
Изучение свойства animation (анимация) начнем с небольшого практического примера под названием "Вечный двигатель".
Для создания анимации в CSS3 необходимо использовать правило @keyframes.
Правило @keyframes определяет где и как создается анимация. Необходимо определить стили CSS внутри правила @keyframes, и анимация будет постепенно изменять свойства объекта от текущего стиля к новому.
В примере выше меняется цвет фона и положение объекта.
Теперь затронем теорию вопроса.
В таблице ниже представлены описания всех свойств, относящихся к animation (анимация).
Для получения анимации необходимо сделать привязку, определив по меньшей мере два анимационных свойства:
Можно менять сколько угодно стилей, сколько угодно раз.
Определить, когда изменения должны произойти можно с помощью значений в процентах или используя ключевые слова "from" и "to", что является синонимами для 0% и 100% соответственно.
0% - это начало анимации, 100% - когда анимация заканчивается.
Гораздо лучше использовать селекторы 0% и 100% (а не "from" и "to"), т.к. браузеры лучше понимают именно формат 0% и 100%.
Рассмотрим классы объекта, чтобы совсем все стало понятно.
Правило @keyframes определено так:
Практическое приминение возможности анимации без программирования на JavaScript и др. технологиях разумно при публикации рекламных объявлений.
См ниже пример и обратите внимание, что даже если браузер не поддерживает свойство animation (анимация), ничего страшного не случится. Просто мяч будет без движения, но смысл объявления все равно будет понятен посетителю странички.
Для футбольного примера использовались классы объекта:
Правило @keyframes определено так:
Теперь отобразим новые полученные знания на нашем учебном тестовом примере.
css_052_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_052_001.zip ← скачайте пример, чтобы установить на свой сайт...
Изучение свойства 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 и др. технологиях разумно при публикации рекламных объявлений.
См ниже пример и обратите внимание, что даже если браузер не поддерживает свойство animation (анимация), ничего страшного не случится. Просто мяч будет без движения, но смысл объявления все равно будет понятен посетителю странички.
Внимание!
Впервые в нашем городе!
Показательный матч по футболу
среди женских команд
"Брюнетки" - "Блондинки"
Вход свободный.
Самое зрелищное
мероприятие сезона!
Красивые комбинации,
модные формы участниц,
короткие юбки выше колен!
Впервые в нашем городе!
Показательный матч по футболу
среди женских команд
"Брюнетки" - "Блондинки"
Вход свободный.
Самое зрелищное
мероприятие сезона!
Красивые комбинации,
модные формы участниц,
короткие юбки выше колен!
Для футбольного примера использовались классы объекта:
.sample_052_soccers {
position:relative;
width:640px;
height:780px;
padding:10px;
margin:10px;
text-align:center;
border:3px solid #B7F777;
border-radius:10px;
box-shadow: 6px 7px 5px #979797;
background: -40px 0px no-repeat url('images/girl_left.jpg'), white 450px 0px no-repeat url('images/girl_right.jpg');
color:#FF0000;
font-family: "Courier New", "Courier", "Andale Mono", monospace;
font-size:32px;
font-weight:bold;
text-align: center;
text-shadow: 12px 5px 2px #707070;
}
.sample_052_ball {
position:absolute;
animation-name:for_sample_052_ball;
animation-duration:3s;
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_ball;
-webkit-animation-duration:3s;
-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;
left:10px;
bottom:40px;
}
}
Правило @keyframes определено так:
@keyframes for_sample_052_ball {
0% {left:10px; bottom:40px;}
20% {left:520px; bottom:640px; }
80% {left:520px; bottom:0px;}
90% {left:520px; bottom:70px;}
100% {left:10px; bottom:40px;}
}
@-webkit-keyframes for_sample_052_ball /* Safari and Chrome */ {
0% {left:10px; bottom:40px;}
20% {left:520px; bottom:640px; }
80% {left:520px; bottom:0px;}
90% {left:520px; bottom:70px;}
100% {left:10px; bottom:40px;}
}
Теперь отобразим новые полученные знания на нашем учебном тестовом примере.
css_052_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_052_001.zip ← скачайте пример, чтобы установить на свой сайт...
***** Машина-Функционал для передвижения по страничкам курса CSS *****
Вы кликнули поясняющий рисунок, который показывает, как работает тот или иной функционал. Кликать эти рисунки не надо, нет смысла.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
Эти рисунки надо просто смотреть, а тексты к ним читать. Кликать кнопки следует на самом функционале.
