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)
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ