Трансформація та анімація CSS
CSS-трансформація та анімація застосовуються для різноманітних ефектів.
2D-трансформації
!!!!!transform-origin: 130px -10px;
!!!!!
transform: rotate(angle); - обертання елемента.
transform: translate(x, y); - зміщення елемента по осях X, Y.
transform: scale(n); - маштабування елемента, є також scaleX, scaleY.
transform: skewX(angle); - наклон елемента, є також skewY.
transform: matrix(...); - трансформація елемента відповідно до матриці перетворень.
rotate(40deg) translate(-5%, 10px) scale(2) scale(0.3, 0.7) skewX(40deg) skewY(40deg)
Трансформації відбуваються миттєво. Проте, можна добавити анімацію transition: transform 2s ease;:
rotate(40deg) translate(-50%, 100px) scale(2) scale(0.5, 0.2) skewX(40deg) skewY(40deg) scale cubic-bezier flip mirror
3D-трансформації
sorry, in progress...
backface-visibility: visible|hiddenАнімація CSS
transition: property duration timing_function delay; - стиль, що робить анімацію між двома станами.
property - стилі, які необхідно анімувати (all - всі стилі).
duration - тривалість анімації в секундах, мілісекундах, хвилинах...
timing_function - функція плавності анімації (linear, ease, ...).
delay - затримка перед початком анімації.
Розглянемо приклад:
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
$('.box').on('click', function(){ $(this).toggleClass('active'); });
"Покадрова" анімація
sorry, in progress...
@keyframesПриклад випадаючого меню
.menu1:hover ul,
.menu2:hover ul { transition: height 400ms linear;}
.menu1:hover ul { height: auto;}
.menu2:hover ul { height: 159px;}
$('.menu3').hover(function(){
$('.menu3 ul').slideToggle();
});