CSS від А до Я: keyframe анімація

29

Від автора: вітаю вас в нашій серії уроків CSS від А до Я! В цій серії я розповім вам про CSS значення і властивості, які починаються з різних букв алфавіту. Іноді навчального ролика буває недостатньо, і в цій статті я дам вам кілька швидких рад по роботі з keyframe анімацією.

K значить @keyframes

У цьому уроці ми розглянемо способи обробки вендорних префіксів, а також покажемо, як отрефакторить вашу @keyframes анімацію у більш стислий формат.

У цьому відео на літеру K ми багато говорили про @keyframes анімації. Тут же ми дамо кілька дуже корисних порад при роботі з CSS анімацією, а також розповімо про справжніх або майбутніх експериментальних властивості.

Порада 1

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

@keyframes pulse {
0%, 50% {font-size: 10px;}
25%, 100% {font-size: 20px;}
}
/* те ж саме, що */
h1, h2, h3 {
font-family: ‘Avenir’, sans-serif;
}

Порада 2

CSS-анімація має хорошу підтримку в браузерах. На момент написання статті підтримка становила 89.5%, і у всіх браузерах @keyframes і властивість animation працювали без префіксів.

Тим не менш, для зворотної підтримки Safari 8 і iOS 8.4 і нижче вам доведеться використовувати префікс –webkit, щоб анімація працювала. Як і всі ті крихітні зміни, які необхідно провести в безлічі місць, додавання префікса вручну може сильно роздути і ускладнити ваш код. Такий підхід може призвести до людських помилок.
Є два способи підтримувати код чистим і уникнути необхідності ручних виправлень і повторень.

Можна скористатися безпрефиксной JavaScript бібліотекою від Вероу. Бібліотека за вас додасть всі префікси. Ви пишіть звичайний код без префіксів, а скрипт запускається в браузері і вставляє всі необхідні префікси за вас. Скрипт перевіряє підтримку конкретного властивості, що використовується на даній сторінці.

Також можна піти шляхом Autoprefixer. Це постпроцесор CSS, який необхідно запустити після написання коду без префіксів. Часто йде в комплекті з таск раннери типу Grunt або Gulp. Autoprefixer бере всю інформацію з сайту Caniuse і визначає необхідні префікси.

Особисто я віддаю перевагу Autoprefixer з таск раннери Gulp і вже який місяць не прописую вендорные префікси вручну. Відмінний рада щодо прискорення робочого процесу, який працює для всіх властивостей, а не тільки для @keyframes!