Анимация с CSS: ключевые кадры и переходы

Конечно, давайте подробнее рассмотрим анимации с ключевыми кадрами (CSS keyframes) и переходы (CSS transitions).

Анимация с ключевыми кадрами (CSS keyframes):

1. Определение анимации:

Анимации с ключевыми кадрами начинаются с определения анимации с помощью @keyframes. Внутри @keyframes вы указываете набор ключевых кадров, между которыми будет интерполироваться значение свойств.

@keyframes move {
    0% { transform: translateX(0); }
    50% { transform: translateX(100px); }
    100% { transform: translateX(200px); }
}

В данном примере, анимация move начинается с нулевого процента (0%), где элемент сдвигается на 0px по горизонтали. На 50% анимации, элемент сдвигается на 100px, а на 100% – на 200px.

2. Применение анимации к элементу:

После определения анимации, вы должны применить её к элементу, который вы хотите анимировать. Это делается с использованием свойства animation.

.animated-element {
    animation: move 2s ease infinite;
}

Здесь элементу с классом .animated-element назначается анимация move. Указаны параметры анимации: продолжительность (2 секунды), функция времени ("ease"), и бесконечное повторение.

Анимация с переходами (CSS transitions):

1. Указание начального состояния элемента:

Переходы позволяют создавать плавные изменения между текущим состоянием элемента и новым состоянием. Для начала, укажите начальное состояние элемента.

.transition-element {
    width: 100px;
    height: 100px;
    background-color: blue;
    transition: width 1s, height 1s, background-color 1s;
}

В данном примере, элемент .transition-element имеет начальные свойства, такие как ширина, высота и цвет фона. Мы также указываем, какие свойства будут анимированы и с какой продолжительностью (1 секунда).

2. Определение нового состояния:

Далее, определите новое состояние элемента с помощью псевдокласса :hover или других событий (например, с помощью JavaScript).

.transition-element:hover {
    width: 200px;
    height: 200px;
    background-color: red;
}

При наведении мыши (псевдокласс :hover) на элемент, его свойства изменяются.

3. Автоматическое применение переходов

CSS будет автоматически анимировать изменение свойств между начальным и новым состоянием. В данном случае, при наведении на элемент, ширина, высота и цвет фона будут плавно изменяться в течение 1 секунды.

Используйте анимации с ключевыми кадрами и переходы в зависимости от вашего проекта и целей. Ключевые кадры предоставляют большую гибкость для создания сложных анимаций, в то время как переходы позволяют создавать простые анимации с минимальными усилиями.