Дизайн сайту завжди включав в себе видиме і невидиме. Перше реалізовувалося версткою HTML/CSS, друге - за допомогою JavaScript (сторона клієнта). Вибрати розумне співвідношення - означає вибрати оптимальний час пуску веб-ресурсу в експлуатацію.
У сучасному інформаційному інтернет-просторі час має суттєве значення, а час розробки сайту - тим більше. По суті справи, інтернет-ресурс - це ідея, яка більш-менш ясна і формалізована спочатку. Турбота розробника: максимально швидко втілити її у віртуальній реальності. Навіть у випадках, коли процес розробки пов 'язаний з доопрацюванням ідеї або технічного завдання, створення видимої частини можна виконувати в більшій частині випадків відразу.
Можливості CSS-правил
Анімація - не стільки звичайна практика, скільки нагальна необхідність. Якщо раніше мала значення функціональність ресурсу, то сьогодні вона повинна бути належним чином оформлена візуально. Статичні сторінки мало кого влаштовують, відвідувач повинен відчувати, що сайт відчуває його дії і адекватно на них реагує.
Можливостей і варіантів оживити сторінки сайту досить багато, і зовсім не обов 'язково витрачати час на розробку власного унікального коду, як правило, завжди мова йде про JavaScript (браузер, сторона клієнта). Участь сторони сервера (PHP, Perl, інші платформи) має менше значення, хоча в залежності від специфіки завдання можна робити анімацію та здалеку, тобто з сервера.
Анімація CSS - найкраще рішення, коли потрібно зробити дизайн швидко, ефективно і сучасно з мінімальними витратами часу:
Ця ілюстрація показує, наскільки просто реалізувати анімацію простими CSS-правилами.
Загальний синтаксис анімації
Правило animation становлять всього п 'ять (сім) позицій: *-name, *-duration, *-timing-function, *-delay, *-iteration-count, *-direction, *-play-state; де * - це найменування правила - animation з префіксом браузера або без нього.
Використовувати правило дуже просто. Зазвичай використовують запис в один рядок, розділяючи значення пробілом, вказуючи їх у перерахованому вище порядку. Для вірності можна поставити правило поелементно. У разі необхідності слід вказати префікс браузера. У будь-якому випадку анімація з метою кросбраузерності і загальної працездатності повинна бути належно протестована.
Перш ніж планувати використання анімації, слід розглянути можливість застосування інших, більш простих правил та ідей: transition, transform, звичайна гіфка тощо.
Animation - гарне правило, але при його розробці все ж доведеться планувати послідовність кадрів, а якщо їх виявиться велика кількість, то це буде не дуже добре для браузера, та й для розробника вимога замовника щось змінити потребуватиме часу.
@ keyframes - кадри анімації
Перш за все слід звернути увагу, що анімацію тут складають кадри, які вказуються послідовністю: from, 10%, 20%, ... 80%, to. Тут from і to - початкова і кінцева точки, а між ними можна маніпулювати цифрами з будь-яким кроком, природно, в розумній кількості і розумних межах.
У цьому випадку @ keyframes opacity {...} адресує анімацію властивості opacity, яка, як відомо, відповідає за прозорість вмісту теґу. Є цікавий момент: кожен кадр анімації змінює значення цієї властивості, але може змінювати також значення та інші властивості стилю, до якого застосовано:
Тут показано перші два кроки анімації: from і 10%, інші робляться аналогічно. Перший крок - це вихідні значення правил, актуальних для даної анімації, всі наступні містять змінені значення цих правил.
Анімація CSS: конкретний синтаксис
Правило анімації включає в себе основні позиції:
- позначення (необов 'язково ім' я правила);
- тривалість одного циклу;
- тимчасова функція (linear, ease, ease-in, ease-out, ease-inout, nease-out, cubic-bezier);
- затримка початку процесу;
- кількість ітерацій.
Цих позицій цілком достатньо, щоб отримати приголомшливий ефект.
Важливо мати на увазі, що будь-яка анімація CSS - це не синтаксис. Це уява розробника на основі ідей замовника або без таких.
Слід віддавати собі звіт (при розробці кадрів): йдеться про мальований "" мультик "", це кожен коли-небудь робив на сторінках книжки, малюючи в куточках фігурки, зміщуючи або змінюючи щось на кожній наступній. Швидко перегорнувши куточок, можна побачити рух.
Недоліки "" малюваної "" анімації
Так само, як в реальності мальована анімація на куточках листків книжки вимагає для своєї зміни іншої (чистої) книжки, так у разі анімації CSS доведеться переробляти послідовність і зміст кадрів, коли щось знадобиться змінити.
З цієї простої причини не слід захоплюватися множинністю правил кожного кроку, застосовувати можливість об 'єднання тих чи інших правил за кроками. Все завжди повинно бути гранично просто придумано і ще більш просто записано.
Важливо розуміти: мета CSS - надати набір простих правил для оформлення сторінок. Чим менше буде використано правил для кожного ідентифікатора або класу, чим менше буде створено ідентифікаторів і класів, тим краще.
Анімація CSS - це завжди ручна робота. Навіть при використанні системи управління сайтом доповнення сайту анімованим елементом означає його прив 'язку до специфіки області застосування, якщо не йдеться про кнопки, меню або реалізацію інших традицій.
Створюючи "красу" на сторінці, завжди бажано мати на увазі, що знадобиться її змінити.
Точки та форми програми анімації
CSS-анімація при наведенні на логотип компанії - відмінне рішення. Це не тільки завжди спрацьовує, але цього завжди чекає гість, особливо той, хто вперше відвідав ресурс. Нова людина, новий погляд, свіжа думка - психологія відвідувача найсуттєвіший його ресурс.
Застосовуючи просту, але оригінальну, анімацію логотипу компанії та описів основних її позицій у бізнесі (товарів, послуг, способів пропозиції, акцій, знижок тощо), можна залучити нового клієнта відразу.
CSS-анімація тексту - хороший дизайнерський хід, але їм слід користуватися, коли звичайні можливості верстки немає можливості застосувати, або вони обмежують уяву. Наприклад, тег marquee з набором правил CSS.
Рух тексту по екрану (в тому числі інший варіант його анімації) - ідея стара, практична, але істотно залежна від сфери застосування сайту. Якщо в ній немає необхідності, про неї краще сьогодні не згадувати.
CSS-анімація появи - найбільш практична, проста і психологічно затребувана ідея. Якщо не говорити про оригінальні рішення, коли рух мишки може залишати слід у вікні браузера (теги + псевдоклас:hover), то класичний варіант підсвітити обраний клієнтом товар, показати товар в роботі,... - хороше рішення.
Плавна поява елементів сторінки не те щоб дуже, але стала затребуваною внаслідок загальної тенденції динамізації області сайтобудування в цілому. Технологія AJAX робить сторінки динамічними. Контент не завантажується цілком, а приходить у браузер відвідувача по частинах. Хороший привід для застосування ефекту прояву.
Анімація кнопки. CSS просто створено для цього. Ще не було верстальника, а за великим рахунком навіть розробника PHP або JavaScript (спеціалізацій, дуже далеких від правил CSS), який би не витратив пару діб, щоб створити власний шедевр, що має ознаки анімації, або елемент, клік на якому викликає до життя класичне, але донині зворушить
Кнопкова тема, безумовно, цікава. Однак повсюдне поширення мобільних та інших пристроїв, до яких поки немає можливості підключити мишку, передбачає анімувати кнопкову тему в межах практичної розумності.
Найкраща сфера застосування CSS-анімації все ж така: ім 'я та сфера діяльності компанії, її послуги, товари та позиція щодо клієнта.