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

1. @keyframes — определение анимации

Правило @keyframes задаёт последовательность состояний (ключевых кадров) анимации.

@keyframes имя-анимации {
    0% { свойство: значение; }
    50% { свойство: значение; }
    100% { свойство: значение; }
}

• 0% — начало анимации
• 100% — конец анимации
• Можно использовать любое количество промежуточных точек (20%, 75% и т.д.)

2. animation-name и animation-duration

animation-name — задаёт имя анимации (должно совпадать с именем в @keyframes).
animation-duration — задаёт длительность анимации (в секундах s или миллисекундах ms).

.element {
    animation-name: color-change;
    animation-duration: 2s;
}

@keyframes color-change {
    0% { background-color: #530899; }
    50% { background-color: #14b8a6; }
    100% { background-color: #530899; }
}

3. animation-iteration-count — количество повторов

Задаёт, сколько раз повторится анимация.

Возможные значения:

• число — конкретное количество (например, 3)
• infinite — бесконечно

.element {
    animation-iteration-count: 3;  /* повторится 3 раза */
}

4. animation-direction — направление анимации

Задаёт направление воспроизведения анимации.

Возможные значения:

• normal — от 0% к 100% (по умолчанию)
• reverse — от 100% к 0%
• alternate — чередование: сначала от 0% к 100%, затем обратно
• alternate-reverse — чередование, начиная с reverse

.element {
    animation-direction: alternate;
}

5. animation-timing-function — ускорение

Определяет, как меняется скорость анимации на протяжении времени.

Возможные значения:

• ease — медленно в начале, быстро в середине, медленно в конце (по умолчанию)
• linear — равномерно
• ease-in — медленно в начале
• ease-out — медленно в конце
• ease-in-out — медленно в начале и в конце

6. animation-delay — задержка перед началом

Задаёт время ожидания перед началом анимации.

7. animation-fill-mode — что происходит до/после анимации

Определяет, какие стили применяются к элементу вне времени воспроизведения анимации (до начала и после окончания).

Возможные значения:

• none — по умолчанию (возвращается к исходным стилям)
• forwards — сохраняет стили последнего ключевого кадра (100%)
• backwards — применяет стили первого ключевого кадра (0%) ДО начала анимации (во время задержки)
• both — сочетает forwards и backwards

8. Сокращённое свойство animation

Объединяет все свойства анимации в одной строке.

Синтаксис: animation: имя длительность задержка ускорение количество направление fill-mode;