Хитрощі CSS анімації
1. Швидкий перехід до іншого стану під час анімації
2. Негативні затримки анімації
При позитивній затримці початок анімації відкладається зазначений проміжок часу. При негативній затримці анімація починається негайно, але з початку, і з зазначеного цього часу. Інакше кажучи, вона починається з певного моменту всередині свого анімаційного циклу. Це дозволяє застосовувати анімації до кількох різних елементів, при цьому необхідно лише налаштувати значення затримок.
Нижче наведено приклад, у якому анімації всіх кіл починаються негайно й у різних точках анімаційного циклу:
3. Пропорції в анімації
Я намагаюся робити всі елементи, які застосовуються всередині моїх проектів, адаптивними настільки, наскільки це можливо. Це стосується і моїх CSS анімацій. Адаптивність для всіх створених анімацій мною не можлива. Але іноді це обмеження можна обійти, якщо використовувати відсоткові значення чи інші відносні одиниці.
У багатьох анімаціях я використовую елементи з пропорційними чомусь значеннями ширини і висоти: наприклад, кола і прямокутники. Можливо, ви вважаєте, що я застосовую для цього фіксовані значення ширини та висоти? Але це не так. Для цього я можу використовувати значення ширини у відсотках, висоту, рівну нулю та значення padding, також задане у відсотках. Властивість padding-bottom – це хитрість, необхідна для того, щоб зберігати пропорцію щодо ширини:
Нижче наведено приклад цієї техніки в дії. Спробуйте запустити його в окремому вікні браузера і змінити його розміри, щоб побачити, як це працює. У цьому прикладі також використовуються негативні затримки анімації.
4. Зміна якості transform-origin серед анімації
Працюючинад однією зі своїх анімацій, я з подивом виявив, що властивість transform-origin не тільки може бути змінена посеред анімації, але також і до нього можна застосувати анімацію. У прикладі нижче ми створили одну анімацію, використовуючи повороти по різних осях замість того, щоб застосовувати чотири різні анімації.
Недоліком цього трюку є те, що ми не можемо використовувати тут властивість animation-mode: forwards; тільки для частини анімації. Це означає, що нам потрібно переміщати елемент до еквівалентного положення перед тим, як застосовувати зміну властивості transforma-origin . У прикладі вище досягнуто застосуванням переходів, щоб імітувати ефекти обертання. Однак використання цієї техніки в складніших прикладах може стати занадто стомлюючим. Дивіться приклад: піраміда-фенікс.
5. Негативне значення властивості transform-origin
Для властивості transform-origin можна задати негативне значення. Це можна використовувати, наприклад, для створення траєкторій кругового руху. Замість того, щоб окремо задавати значення translate та rotate для одного елемента, ми можемо піти більш простим шляхом. Ми можемо застосувати негативні значення transform-origin та другий елемент або псевдоелемент (або тільки один елемент, якщо ми хочемо, щоб він обертався та рухався круговою траєкторією). Варіюючи різні негативні значення властивості transform-origin, ми можемо застосовувати цю анімацію для багатьох елементів, при цьому для кожного з них буде збережено круговий рух.
6. Чудеса з box-shadow
Для анімації простих форм, що не містять контенту, можна застосувати властивість box-shadow. Ця властивість може створювати різні краї у круглих елементів. За допомогою даної техніки, застосувавши різні види усунення, з елементів HTMLможна створювати нові анімаційні "фігури". Приклад нижче демонструє можливості даної техніки. Ми створили шість круглих елементів, що рухаються круговою траєкторією. Для цього було взято лише один елемент із застосуванням до нього властивості box-shadow і зміщення (offset).
На жаль, відсотки не підтримуються властивостями внутрішньої тіні, тому вони не так легко лягають у код як рідні елементи HTML. Але їх все ж таки можна змінити в анімації вручну або з використанням transform:scale(n) для елемента HTML, частиною якого вони є.
7. Використовуємо псевдо-елементи
Як з box-shadow, можна використовувати псевдоелементи, щоб додати більше контенту на сторінку. Вони можуть бути окремі від батька анімації, власні внутрішні тіні, і вони дуже схожі на дочірні елементи без розмітки HTML. Давайте створимо анімацію на основі одного елемента, як на прикладі нижче.
Тут все великі кола навколо середнього кола, що спалахує, а також два маленькі кола з краю (розташовані один навпроти одного) – внутрішні тіні головного елемента. Інші два маленькі кола є частиною внутрішньої тіні псевдоелемента, а кільце з рис - SVG, який використовується як фон для іншого псевдоелемента.
Можливі проблеми з z-index
Я, мабуть, витратив більше часу, виправляючи проблеми з z-index у моїй анімації, ніж на інше. У різних випадках z-index відображається по-різному. У випадку анімацій, основна різниця полягає в тому, що Webkit, наприклад, анімує значення z-index, тоді як Mozilla цього не робить (замість цього елементи перескакують від одного z-index до іншого).
Ще одна річ, на яку варто звернути увагу - якщо ви хочете, щоб ваші псевдоелементи відображалися забатьківськими, у них має бути негативний z-index, а для батька має бути встановлене суто дефолтне накладення. Це означає, що ви не зможете застосувати z-index або будь-яку іншу властивість, що змінює природний контекст накладання для батьківського елемента.
Остання проблема щодо z-index – властивість прозорості. Якщо прозорість елемента встановлена на будь-якій позначці, крім дефолтної одиниці, він набуває власного контексту накладання.