Анімації

За допомогою стилів можна задавати не лише статичний вигляд сторінки та її елементів, але й їх динамічну зміну.

Так, можна задати стандартне оформлення для певного блоку (наприклад, div), а також його оформлення у момент наведення вказівника миші (hover) на цей блок. Можна переглянути html-код, опис стилів та результат застосування такого ефекту:

 

У цьому прикладі стандартно блок div має ширину та висоту 200 пікселів, а при наведенні мишки (подія hover), ширина змінюється на 300 пікселів протягом 2 секунд. Якщо додати властивість transition: 2s до початкового стилю, то повернення до 200 пікселів теж відбуватиметься не миттєво, а протягом вказаного часу.  


Для гнучкого керування процесом анімації можна задавати визначення окремих кадрів, keyframes. Для такої анімації необхідно вказувати ім'я  – для використання при виклику, а також стильові властивості у різні моменти часу:

  • <відсоток>  значення властивостей у заданий момент часу (у відсотках);
  • <властивість> - анімована властивість;
  • <значення> - значення в момент, описаний селектором кадру.

Так, у наступному прикладі блок div початково має червоний колір тла. Протягом 4 секунд відбувається анімація example з такими етапами: колір заливки змінюється з червоного до жовтого, до синього, до зеленого. У кінці відбувається повернення до червоного кольору, визначеного для блоку div.

Можна також задавати зміну позиції в анімації; для цього у початкових властивостях слід вказати відносне позиціювання, а у кадрах анімації - задати параметри розташування об'єкту відносно верху та лівої межі сторінки. 

У наведеному прикладі також змінений радіус фігури (border-radius) - таким чином можна отримати коло, чи еліпс. Цей атрибут може визначати форму фігури за параметрами скруглення окремих кутів, наприклад border-radius:50% 0 0 0; означає, що скруглений буде лише 1 верхній лівий кут.


Серед анімованих властивостей можна виділити трансформацію transform, яка може набувати значень matrix(n,n,n,n,n,n) - перетворення, translate(x,y) - переміщення, scale(x,y) - масштаб, rotate(кут) - поворот, skew(кут-х,кут-у) - нахиляння, perspective(n) - перспектива


Серед додаткових параметрів анімації можна виділити наступні: 

animation-delay: 2s; - затримка початку анімації

animation-iteration-count: 3; - кількість повторів анімації. можливе значення  infinite; - безконечне повторення

animation-direction: reverse; - напрям анімації (повторити у зворотньому порядку). можливе значення alternate; - повторювати в прямому та зворотньому порядку

animation-timing-function: linear; - прискорення анімації (відсутнє). можливі значення:  ease;  ease-in;  ease-out; ease-in-out;


Варто зазначити, що існує скорочений запис стильових властивостей.

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

можна записати:

div {
  animation: example 5s linear 2s infinite alternate;
}


Властивості анімації можуть специфічно підтримуватись різними браузерами, тож для коректного відтворення слід вживати так звані префікси - додавати до стильових властивостей уточнення того, для якого браузера вони призначені.

  • Chrome & Safari: -webkit-
  • Firefox: -moz-
  • Opera: -o-
  • Internet Explorer: -ms-

div {
-webkit-animation: example 5s linear 2s infinite alternate;
-moz-animation: example 5s linear 2s infinite alternate;
-o-animation: example 5s linear 2s infinite alternate;
-ms-animation: example 5s linear 2s infinite alternate;
animation: example 5s linear 2s infinite alternate;
}

Додаткові посилання

1) Створення фігур на css: http://www.internet-technologies.ru/articles/sozdaem-geometricheskie-figury-s-pomoschyu-css.html

2) Завантажувальні анімації: http://wp-lessons.com/zagruzochnyie-animatsii-css3 та приклади реалізації http://wp-lessons.com/demo/css/zagruzochnyie-animatsii-css3.html

3) Анімоване меню: http://www.internet-technologies.ru/articles/polnocvetnoe-animirovannoe-navigacionnoe-menyu-na-css3.html

Остання зміна: понеділок 12 лютого 2018 12:12