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

СВОЙСТВО ANIMATION-PLAY-STATE

Свойство animation-play-state указывает, будет ли анимация запущена или приостановлена.

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

Синтаксис

animation-play-state: running|paused|initial|inherit

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

Песочница

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

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

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

.item:hover {
    animation-play-state: paused
}

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