Справочники CSS3 animation

Что такое animation в CSS3?

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

Свойство animation объединяет несколько под-свойств, таких как animation-name, animation-duration, animation-timing-function, animation-delay и другие. Это позволяет управлять анимацией комплексно.

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

Пример использования:


/* Определяем ключевые кадры анимации */
@keyframes move {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(50px);
    }
    100% {
        transform: translateX(0);
    }
}

/* Применяем анимацию к элементу */
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: move 2s infinite;
}

В данном примере элемент с классом box перемещается по оси X, следуя ключевым кадрам, и анимация повторяется бесконечно благодаря значению infinite.

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

Комментарии