графіка та анімації в сss

Поактика 

Жабка

Морква

Анімації

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

Так, можна задати стандартне оформлення для певного блоку (наприклад, 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 - перспектива

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

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