Анімація css і її можливості

Переймаючись питанням, як зробити анімацію CSS, багато користувачів відправляються на пошуки уроків та інструкцій. І хоч подібні інструкції ви знайдете і тут, крім іншого, ми дамо вам головний корисну пораду в справі створення анімації за допомогою CSS.

Секрет ідеальних розробок

Найголовніший порада, яку можна дати тим, хто бажає дізнатися в повній мірі, що ж таке плавна анімація CSS, полягає в наступному. При щоденних експериментах з готовими шматками коду намагайтеся проводити і власні досліди. Під час, вільний від роботи на власних сайтах, спробуйте подивитися, що станеться при складанні того чи іншого шматка коду, вивчити ту чи іншу властивість в повній мірі. Намагайтеся реалізовувати всілякі цікаві задумки, використовуючи абсолютно різні інструменти мови, і анімація CSS відкриється для вас з нового боку. Цей простий порада полягає в наступному - експериментуйте самі.

CSS-анімація появи

А тепер перейдемо до цікавих прикладів. Як правило, стандартне використання анімації полягає в тому, щоб міняти якісь елементи сайту плавно з плином часу. Але це ж занадто банально, чи не так? Тому тут ми поділимося з вами неординарним способом використання часу появи анімації.

Справа в тому, що реально зміни на сайті в шматку анімації або в її повному вигляді можуть бути практично миттєвими. Для цього ми задаємо два будь-яких ключових кадру, але при цьому використовуємо дуже маленький інтервал. Наприклад, він може бути дорівнює 0,001%. В такому випадку анімація CSS може статися моментально. Це відмінно підійде для імітації будь-якої неонової вивіски. Вивіска ця буде блимати, а якщо анімація CSS при цьому буде ще й використовувати прозорість і властивість text-shadow, то вивіска вийде майже як справжня.

Наведемо приклад коду.

Відео: CSS Анімація - стрибучий м`яч | урок по CSS і CSS3, анімація

Покращуємо функціонал кнопок

Якщо розглянути питання, який незвичайної може бути CSS-анімація кнопки, то можна сказати, що варіантів прикраси кнопок на сайтах безліч. Розглянемо один із прикладів. Ефект натиснутою опуклою кнопки. Приклад коду - нижче.

За допомогою такого простого шматка коду анімація блоку CSS буде виглядати досить непогано. Вона виглядає дуже цікаво і часто використовується на досконалих різних сайтах.

CSS-анімація при наведенні на фрагмент сайту

Чим динамічніше і сучасніше сайт, тим довше на ньому залишається користувач. Крім того, важливу роль відіграє також і інтерактивність. Безумовно, це так, але що ж може допомогти зробити сайт максимально інтерактивним?

Дуже непогано тут виглядає робота з дизайном елементів і фрагментів сайту при наведенні миші. Анімацію кнопок при наведенні ми розібрали вище, але крім цього можна "оживити" і всілякі шматки сайту, зробивши їх максимально стильними. Як і з усім іншим, головний принцип тут - не переборщити.

Отже, є чудове властивість transition, яке може приймати аж до чотирьох пов`язаних з ним властивостей.

Протягом певного часу CSS-анімація при наведенні на цей шматок коду буде змінюватися. Час визначається властивістю duration. Тобто при наведенні на який-небудь елемент у нього почне своєрідно змінюватися якесь властивість, яке ми поставили в селекторі. Для нашого випадку це - .element (точка попереду). Трохи нижче наводиться приклад коду, коли при переході у контейнера div, який володіє псевдоклас .hover, змінюється фон з червоного на зелений.

При наведенні миші користувача анімація CSS змінюється не відразу, а з затримкою в деяку частку секунди, що створює цікавий ефект.

Крім того, якщо в попередньому прикладі ви задавали певний правило, за яким фон у елемента div повинен був змінюватися з червоного і переходити на зелений протягом 0,4 секунди, то слід врахувати, що використовуючи значення all, ви можете звернутися до всього властивості цілком відразу.

Відео: Майбутнє CSS і Web анімації - uWebDesign подкаст # 79

Приклад коду представимо в такий спосіб.

Як було показано, у властивостей padding і background відбудеться ефект переходу, який визначається властивістю transition. Вам слід врахувати, що ви можете через кому вказати цілий певний набір значень.

Кілька нюансів використання даного типу анімації на кнопках

В принципі, за великим рахунком не настільки важливо, в якому порядку будуть вказуватися і перераховуватися дані значення. Крім одного випадку. Ми можемо мати справу з властивістю delay. У такому випадку нам буде потрібно вказувати і тривалість за часом. Інакше кажучи, нам необхідно буде в коді повідомити, як довго буде відбуватися та найпотрібніша нам затримка.

Пам`ятайте при цьому, що деякі властивості не можуть бути з ефектом transition. Тобто вони не можуть бути перехідними. Це відбувається через те, що вони вже можуть не бути анімованими.

анімація тексту

За допомогою коду може бути задана і чудова анімація тексту CSS. Це може бути і якась стаття, і великий заголовок, титул сайту. Як вже було сказано вище, тут головне - не переборщити і не перетворити свій сайт в смітник, яка буде дешево виглядати.

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

Анімуємо текст в стилі фільмів жахів

Власне, сама ідея полягає в тому, щоб зробити текст, в якому букви були б трохи розмиті і оберталися б. Між буквами при цьому має бути простір. Ми будемо використовувати інтервали між буквами тіні, а також інтервал. Для того щоб реалізувати задум, нам буде потрібно скрипт Lettering.js авторства Дейва Руперта. Він потрібен, щоб обернути слова плюс букви в кілька тегів span. Спочатку потрібно обернути фрази в тег h2. Наведемо приклад коду.

Потім обернём все слова в тегах h2 в тег span.

Це станеться ось так.

Відео: Основи CSS-анімації (частина 1)

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

Вийде досить божевільна структура.

В результаті ми кожну з наявних у нас букв обернули в тег span. Їх вийшло дійсно багато. Але в коді вище наведений приклад досить спрощений. Цілком всю структуру ви зможете написати самі, і вона буде дещо більше. Залежить це також і від того, який текст ви будете використовувати.

Завершимо нашу роботу деякої невеликої стилізацією. Всі наші заголовки в наведеному прикладі будуть розташовуватися на всю ширину екрану. І займати вони будуть майже все вільне місце.

Оскільки ми збираємося розташувати всі наші букви по центру екрана, то для нашого контейнера нам також буде потрібно і flexbox.

Наведемо приклад його коду.

Відео: AngularJS на практиці - Анімація на основі j&# 097; vascript

Тепер ми зробили так, що всі букви, які обгорнуті в клас span, який належить батьківського класу .os-phrases, будуть розташовуватися і будуть закріплені саме по центру.

Не забудьте додати трохи вільного місця, тобто сам міжбуквений інтервал.

При цьому перша обгортка буде як би мати певний додатковий властивість. Це властивість perspective. Воно дозволить нам зробити так, що цю ділянку як би буде виділятися, виходити на перший план.

Самі ж букви наші будуть прозорими, а інтервал анімації ми запустимо для них десь в 5,2 секунди. Нижче - приклад коду.

Важливо також і визначити, як і з якою затримкою будуть з`являтися наші пропозиції і фрази. Яка з частин тексту буде з`являтися швидше, ніж попередня, і наскільки. Код буде виглядати наступним чином.

Додамо невеликий, але вельми цікавий ефект. Ставте opacity на 0,2. Межбуквенное відстань при цьому буде досить великим. Букви також будуть кілька повернені по осі Y. Бачити ви, а також користувачі вашого сайту, будете тільки невелику частину цих букв. Також не забудьте додати ефект властивості text-shadow. На половині анімації ми зробимо незвичайну річ. Ми загострити самі букви, а також зменшимо відстань, яке розташовується між ними, потім збільшимо непрозорість, а після повернемо знаки на 0 по осі Y.

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

І нарешті остання фраза CSS-анімації.

І так, наостанок додамо останній штрих. Зробимо акцент на деяких конкретних словах. У них буде жирне накреслення. Це і додасть необхідний акцент.

Не забувайте і про джерела натхнення

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

Крім того, якщо ви не будете підглядати, як зроблений той або інший ефект, а спробуєте відтворити його своїми силами, то зможете досягти великих результатів. Або, принаймні, завжди дізнаєтеся щось більше про можливості того мови програмування, який ви, власне, і використовуєте. Навіть в повному обсязі реалізована вами задумка цілком може виявитися вельми ефектною.