Зберегти або поділитися
У цьому посібнику ви познайомитеся з CSS анімацією, потужним способом для реалізації речей, які стають все більш і більш популярними в міру впровадження підтримки в браузерах. Розглянувши основи, ми створимо невеличкий приклад, який анімує перетворення квадрата в коло:
Введення в @keyframes і анімацію
Далі, щоб CSS анімація запрацювала, необхідно пов'язати @keyframes з селектором. Завдяки цьому, весь код усередині @keyframes буде поступово оброблятися, на основі тимчасових відміток початковий стиль буде замінюватися на новий.
@keyframes
Тут ми поставимо етапи анімації. Властивості нашого правила @keyframes:
- обраний нами ім'я (в даному випадку tutsFade);
- етапи: 0% -100%; від (0%) до (100%);
- стилі CSS: стиль, який ми хотіли б застосувати на кожному етапі.
Наведений вище код викличе зміна в прозорості елемента, від opacity: 1 до opacity: 0. Кожен з підходів, показаних вище, призведе до одного результату.
Властивість animation використовується, щоб викликати @keyframes всередині CSS селектора. Анімація може мати кілька властивостей:
- animation-name. ім'я @keyframes (пам'ятаєте, ми вибрали tutsFade);
- animation-duration. час, загальна тривалість анімації від початку до кінця;
- animation-timing-function. встановлює швидкість анімації (linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier);
- animation-delay. затримка перед стартом нашої анімації;
- animation-iteration-count. кількість повторень анімації;
- animation-direction. дає вам можливість змінити напрямок циклу анімації, від початку до кінця, або від кінця до початку, або все разом;
- animation-fill-mode. задає, які стилі будуть застосовані до елементу, коли наша анімація закінчиться (none | forwards | backwards | both).
Наведений код створює ефект миготіння з односекундного затримкою старту анімації, із загальною тривалістю анімації в 4 секунди, з альтернативним напрямом (в кожному циклі напрямок змінюється на протилежне) і з нескінченним лінійним циклом повторень.
Додавання префіксів розробників
Поки специфікація знаходиться на стадії робочого чернетки, ми повинні використовувати браузерні префікси, щоб забезпечити кращу підтримку браузерів. Використовуються стандартні префікси:
- Chrome і Safary: -webkit-
- Firefox: -moz-
- Opera: -o-
- Internet Explorer: -ms-
Властивість animation, що використовує префікси розробників, виглядає так:
поруч з @keyframes:
Щоб зберегти читається вигляд у цьому посібнику, я продовжу без використання префіксів, але остаточна версія прикладу буде з ними, і я хотів би закликати вас використовувати префікси в коді CSS.
кілька анімацій
Ви можете додати кілька анімацій, використовуючи кому як роздільник. Припустимо, що ми хочемо додати додаткове обертання до нашого елементу tutsFade. і ми зробимо це, оголосивши додатковий @keyframes і прив'язавши його до нашого елементу:
Приклад «анімація квадрат-коло»
Давайте створимо перетворення простий фігури, анімацію квадрат → коло, використовуючи описані вище принципи. У нас буде всього п'ять стадій, і на кожній стадії ми визначимо радіус заокруглення кутів, поворот і колір фону нашого елементу. Досить розмовляти, почнемо писати код.
базовий елемент
Для початку створимо розмітку, елемент, який будемо анімувати. Ми навіть не будемо возитися з іменами класів, а просто скористаємося простим елементом div:
Потім, використовуючи селектор елемента (div <> ), Задамо для div стилі за замовчуванням:
Тепер підготуємо @keyframes. який ми назвемо square-to-circle. і п'ять стадій
Нам необхідно задати кілька стилів всередині цих стадій, тому давайте почнемо з визначення border-radius для кожного кута квадрата:
Крім того, ми можемо поставити різні background-color для кожної стадії.
І щоб вже зовсім було круто, давайте ще й обертати div для залучення уваги.
застосування анімації
Після визначення нашої анімації «квадрат → коло» ми повинні застосувати її до div:
Як бачите, тут ми добавіль скорочена властивість animation. в якому задається:
- ім'я анімації (animation-name) - square-to-circle;
- тривалість анімації (animation-duration) - 2s;
- затримка анімації (animation-delay) - 1s;
- кількість повторень анімації (animation-iteration-count) - infinite. тому вона буде тривати нескінченно;
- напрямок анімації (animation-direction) - alternate. тому вона буде відтворюватися від початку до кінця, потім назад до початку, потім знову до кінця і т.д.
Використання тимчасових функцій - це круто
І останнє значення, яке ми можемо додати до властивості animation - це animation-timing-function. Це визначить швидкість, прискорення і уповільнення руху. Ця функція може приймати досить деталізоване значення, яке незручно розраховувати вручну, але існує безліч безкоштовних сайтів, які надають ресурси і живі настройки для тимчасових функцій анімації.
Одним з таких інструментів є CSS Easing Animation Tool. тому давайте скористаємося нею, щоб розрахувати нашу тимчасову функцію.
Я хотів би додати ефект гнучкості до нашої анімації square-to-circle, використовуючи функцію кубічної кривої Безьє.
Погравши з ручками і сформувавши якийсь тип кривої Безьє, поновіть значення тимчасової функції анімації, використовуючи наданий фрагмент коду.
Кінцевий код без використання префіксів розробників (-webkit-. -moz-. -ms-. -o-) буде наступним:
І останнє
В сучасних браузерах все працює добре, але Firefox має неприємну звичку рендерить трансформуються об'єкти в поганій якості. Погляньте на ці зубчасті лінії, щоб зрозуміти, що я маю на увазі:
На щастя, для цього є обхідний шлях. Додайте до вашого div наступний прозорий контур, і Firefox буде рендерить все на відмінно!
висновок
От і все! Ми використовували CSS синтаксис анімації, щоб створити просту, повторювану анімацію.
підтримка браузерами
Для отримання актуальної інформації про підтримки CSS анімації браузерами перевірте Can I use. Але в двох словах, підтримка включена в наступних версіях браузерів: Firefox 5 +, IE 10+, Chrome, Safari 4 +, Opera 12+.