Трансформація і анімація в CSS
2D-трансформація елементів
Загальний вид стилів для трансформації:
.element {
transform: видТрансформації(величина);
}
transform: rotate(angle); - обертання елемента довкола центра.
transform: translate(x, y); - зміщення елемента по осях X, Y відносно початкового положення.
transform: scale(n); - маштабування елемента, є також scale(x, y), scaleX(x), scaleY(y).
transform: skewX(angle); - нахил елемента, є також skewY(angle).
Стилі трансформації добавлено на hover-ефект елементів:
rotate(40deg) translate(-5%, 10px) scale(2) scale(0.3, 0.7) skewX(40deg) skewY(40deg)
Якщо потрібно застосувати декілька трансформацій до одного елемента - вони вказуються через пробіл:
.element {
transform: rotate(45deg) scale(1.2) skewX(15deg) translate(20px, 10px);
}
Також всі види трансформації можна прописати в одній властивості matrix, але для розуміння цих трансформацій потрібно добре розбиратися в математичних матрицях:
transform: matrix(a, b, c, d, tx, ty); - трансформація елемента згідно матриці перетворень.
3D-трансформація елементів
Тривимірні трансформації значно складніші і використовуються не часто, в основному для спецефектів в купі з анімацією.
Для 3D-трансформації є стилі:
perspective(400px) - налаштовує перспективу
rotate3d(x, y, z, angle), rotateX(angle), rotateY(angle), rotateZ(angle)
translate3d(x, y, z), translateX(x), translateY(y), translateZ(z)
scale3d(x, y, z), scaleX(x), scaleY(y), scaleZ(z)
matrix3d(16 аргументів)
Анімація
Для різноманітних ефектів часто цілком достатньо CSS-анімації, наприклад, для постійно діючої анімації (крутиться шестерня), ховер-ефектів, випадаючих елементів та ін.
Складніші ефекти створюються за допомогою SVG-анімації, JavaScript, навіть є можливість використовувати потужну 3D-анімацію за допомогою рушія WebGL (OpenGL для браузерів).
Анімація в CSS відбувається між двома станами елемента: наприклад, звичайний стан і hover-ефект, фокус об'єкта, перемикання чекбокса чи радіокнопки вище по коду... За допомогою JavaScript можна змінювати класи і атрибути у елементів, міняти батьківські та сусідні вище по коду елементи - це все теж можна використовувати для зміни станів.
Загальний вид стиля для анімації:
.element {
transition: property duration timing_function delay;
}
property - стилі, які необхідно анімувати (all - всі стилі).
duration - тривалість анімації в секундах, мілісекундах, хвилинах...
timing_function - функція плавності анімації (linear, ease, ...).
delay - затримка перед початком анімації.
a.product {
color: blue;
transition: color 1s linear 500ms;
}
a.product:hover {
color: red;
}
Посилання з класом product по замовчуванню синього кольору. Анімація задана для дефолтного стану - вона буде працювати і при наведенні миші на елемент, і після прибирання миші з об'єкта. Якщо стиль анімації перенести на :hover-селектор - анімація буде спрацьовувати лише після прибирання миші з елемента.
Стиль анімації вказує що потрібно змінити колір тексту від синього до червоного чи навпаки, зміна кольору буде відбуватися плавно протягом однієї секунди і лінійно. Також є необов'язковий параметр delay - він вказує на те, що анімацію слід починати після 0,5 с. затримки.
Анімувати можна не всі стилі, а лише ті, що можуть плавно змінюватися. Плавно змінити стан з display: block у display: none не вийде, так само як і змінити жирність/накреслення тексту, підкреслення, властивість float і т.д.
Також не вдасться анімувати елементи, в яких значення стилів вказано як auto: наприклад, не можна за допомогою CSS анімувати випадаюче меню, якщо йому чітко не задано висоту (як правило, висота автоматично визначається контентом). В цьому випадку застосовують JavaScript.
Розглянемо такий приклад:
TEST
.test1 {
display: inline-block;
padding: 24px 60px;
color: black;
background: silver;
transition: background 2s linear 2s;
}
.test1:hover {
color: white;
background: blue;
}
При ховері міняється колір тексту та фон. Але для фона задано анімацію тривалістю 2 секунди, яка має виконатися із затримкою у 2 секунди.
Можна задати окремо анімацію для різних стилів, окремо на втрату ховера:
TEST
.test2 {
color: black;
background: silver;
transition: all 400ms;
}
.test1:hover {
color: white;
background: blue;
transition: color 10s, background 2s;
}
Змінити стан можна багатьма способами, зміною класів, атрибутів, checked, didabled, :focus...
Клік = toggleClass('active') input:focus
JavaScript-код кліка по елементу:
document.querySelector('.box').onclick = function(){
this.classList.toggle('active');
};
Плавні трансформації елементів:
rotate(40deg) translate(-50%, 100px) scale(2) scale(0.5, 0.2) skewX(40deg) skewY(40deg) scale cubic-bezier flip mirror
Анімація по кадрам (фреймам)
Тут Боба кається, що ще не дописав лекцію по @keyframes і розказує цю тему усно.
Більш складні варіанти анімацій можна робити за допомогою ключових кадрів, координат, стоп-точок...
Також можна зробити нескінченну анімацію типу прелоадера.
...