6.1 Правило @keyframes
CSS-анімації дозволяють створювати складні та плавні візуальні ефекти з мінімальними зусиллями. Основний інструмент для створення анімацій у CSS — це правило @keyframes, яке визначає ключові кадри анімації та зміни стилів, що повинні відбуватись на кожному кадрі.
Правило @keyframes використовується для створення анімації, визначаючи зміни CSS-властивостей на різних етапах виконання анімації. Ключові кадри визначають, які стилі будуть застосовуватись у певні моменти часу в процесі анімації.
Синтаксис 1:
@keyframes animation-name {
from {
/* початкові стилі */
}
to {
/* кінцеві стилі */
}
}
Синтаксис 2:
@keyframes animation-name {
0% {
/* початкові стилі */
}
100% {
/* кінцеві стилі */
}
}
Де:
fromвідповідає0%часу анімаціїtoвідповідає100%часу анімації
Приклад: Плавна зміна кольору фону
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Animation Example</title>
<style>
@keyframes changeColor {
from {
background-color: lightblue;
}
to {
background-color: lightcoral;
}
}
.animated-box {
width: 200px;
height: 200px;
background-color: lightblue;
animation: changeColor 3s infinite;
}
</style>
</head>
<body>
<div class="animated-box">Hover over me!</div>
</body>
</html>
Пояснення:
- правило
@keyframes changeColorвизначає анімацію, що змінює колір фону елемента зlightblueнаlightcoral - властивість
animationна елементі.animated-boxвказує, що анімаціяchangeColorповинна тривати 3 секунди і повторюватись нескінченно
6.2 Кілька ключових кадрів
Ви можете використовувати більше двох ключових кадрів, щоб створити більш складні анімації, визначаючи стилі для проміжних станів.
Приклад: Рух по діагоналі зі зміною кольору
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Keyframes Example</title>
<style>
@keyframes moveAndChangeColor {
0% {
background-color: lightblue;
transform: translate(0, 0);
}
50% {
background-color: lightgreen;
transform: translate(100px, 100px);
}
100% {
background-color: lightcoral;
transform: translate(200px, 0);
}
}
.animated-box {
width: 200px;
height: 200px;
background-color: lightblue;
animation: moveAndChangeColor 5s infinite;
}
</style>
</head>
<body>
<div class="animated-box">Watch me move!</div>
</body>
</html>
Пояснення:
Правило @keyframes moveAndChangeColor визначає анімацію, яка змінює колір фону та позицію елемента в три етапи.
- На 0% часу анімації елемент має світло-блакитний колір і знаходиться в початковій позиції
- На 50% часу анімації елемент має світло-зелений колір і переміщується на 100 пікселів вправо і вниз
- На 100% часу анімації елемент має світло-кораловий колір і переміщується на 200 пікселів вправо
6.3 Приклади простих анімацій
Приклад 1: Пульсація
Створення ефекту пульсації, коли елемент плавно збільшується і зменшується.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pulsing Effect</title>
<style>
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.pulse-box {
width: 150px;
height: 150px;
background-color: lightpink;
animation: pulse 2s infinite;
}
</style>
</head>
<body>
<div class="pulse-box">Pulsing</div>
</body>
</html>
Пояснення:
- правило
@keyframes pulseвизначає анімацію, яка збільшує елемент до 120% і повертає його до початкового розміру - властивість
animationна елементі.pulse-boxвказує, що анімаціяpulseповинна тривати 2 секунди і повторюватись нескінченно
Приклад 2: Обертання
Створення ефекту безперервного обертання елемента:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotating Effect</title>
<style>
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.rotate-box {
width: 100px;
height: 100px;
background-color: lightseagreen;
animation: rotate 3s infinite linear;
}
</style>
</head>
<body>
<div class="rotate-box">Rotating</div>
</body>
</html>
Пояснення:
- правило
@keyframes rotateвизначає анімацію, яка обертає елемент від 0 до 360 градусів - властивість
animationна елементі.rotate-boxвказує, що анімаціяrotateповинна тривати 3 секунди, повторюватись нескінченно і відбуватись з постійною швидкістю (linear)
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ