CSS-анимация — это мощный инструмент для добавления движения и интерактивности на веб-сайты. Она позволяет создавать плавные переходы, анимации и эффекты без использования JavaScript. В этой статье мы рассмотрим основные аспекты работы с анимацией в CSS.
Основные понятия CSS-анимации
- Ключевые кадры (
@keyframes): Определяют набор стилей, которые применяются к элементу в определенные моменты времени. - Свойство
animation: Управляет различными аспектами анимации, такими как продолжительность, задержка, количество повторений и т.д. - Переходы (
transition): Позволяют плавно менять значения одного или нескольких CSS-свойств.
Ключевые кадры (@keyframes)
Ключевые кадры определяют последовательность изменений стиля элемента. Каждый ключевой кадр представляет собой момент времени в процессе анимации, в котором стиль элемента изменяется.
@keyframes example {
from {
opacity: 0;
}
to {
opacity: 1;
}
}В этом примере анимация начинается с непрозрачного состояния (opacity: 0) и заканчивается прозрачностью 100% (opacity: 1).
Также можно использовать проценты для определения промежуточных состояний:
@keyframes bounce {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}Эта анимация заставляет элемент сначала увеличиться в размере, а затем вернуться к исходному размеру.
Свойство animation
Свойство animation объединяет несколько параметров, определяющих поведение анимации. Оно включает такие параметры, как имя ключевых кадров, длительность, задержку, количество повторений и другие.
.element {
animation: example 2s ease-in-out infinite;
}В этом примере используется анимация с именем example, которая длится 2 секунды, имеет эффект ускорения в начале и замедления в конце (ease-in-out) и повторяется бесконечно (infinite).
Можно также разбивать эти параметры на отдельные свойства:
.element {
animation-name: example;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}Переходы (transition)
Переходы позволяют плавно изменять значение одного или нескольких CSS-свойств при изменении состояния элемента (например, при наведении курсора мыши).
.button {
background-color: blue;
transition: background-color 0.5s;
}
.button:hover {
background-color: red;
}В этом примере цвет фона кнопки меняется с синего на красный при наведении курсора мыши. Переход длится 0.5 секунды.
Можно также задать несколько свойств для перехода:
.button {
background-color: blue;
color: white;
transition: background-color 0.5s, color 0.3s;
}
.button:hover {
background-color: red;
color: black;
}Теперь оба свойства — background-color и color — будут плавно меняться при наведении курсора.
Пример полной анимации
Рассмотрим пример анимированного блока, который меняет цвет и вращается:
 |
 |
 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS Animation Example</title> <style> .animated-block { width: 100px; height: 100px; background-color: blue; animation: rotateAndChangeColor 2s linear infinite; } @keyframes rotateAndChangeColor { 0% { transform: rotate(0deg); background-color: blue; } 50% { transform: rotate(180deg); background-color: green; } 100% { transform: rotate(360deg); background-color: blue; } } </style> </head> <body> <div class="animated-block"></div> </body> </html>
В этом примере блок размером 100×100 пикселей вращается на 360 градусов и меняет цвет с синего на зеленый и обратно. Анимация продолжается бесконечно.
CSS-анимация — это отличный способ добавить динамичности и интерактивности вашему сайту. Она проста в использовании и позволяет создавать впечатляющие визуальные эффекты без необходимости глубокого знания JavaScript. Используйте ключевые кадры, свойство animation и переходы для создания уникальных и привлекательных анимаций.
Загрузка...