1. Главная
2. CSS
3. Свойство @keyframes

СВОЙСТВО @KEYFRAMES

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

Поддержка браузеров

Синтаксис

@keyframes [имя анимации] {
    [селектор ключевых кадров] {
        [CSS стили]
    }
}

Значения свойства

Песочница

Код в песочнице можно редактировать и видеть результат в реальном времени:

<div class="item"></div>

@keyframes animation {
    from {
        left: 0px;
    } to {
        left: 280px;
    }
}
   
.item {
    width: 120px;
    height: 120px;
    background: beige;
    position: relative;
    animation: animation 5s infinite;
    animation-direction: alternate
}