1. Главная
2. CSS
3. Свойство animation-name

СВОЙСТВО ANIMATION-NAME

Свойство animation-name определяет список анимаций (@keyframes), которые будут применяться к элементу.

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

Синтаксис

animation-name: none|строка|initial|inherit

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

Песочница

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

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

.item {
    width: 120px;
    height: 120px;
    background: beige;
    position: relative;
    animation-name: animation;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes animation {
    from {
        left: 0px;
        border-radius: 50%;
    } to {
        left: 280px;
        border-radius: 0;
    }
}