Свойство animation-play-state

Определяет состояние анимации. Анимацию можно поставить на паузу и после чего воспроизвести с того места, где она была остановлена, а не сначала

animation-play-state: paused;
  • поддерживается начиная с
  • частичная поддержка до
  • не поддерживается

Значения

animation-play-state: running;

Анимация проигрывается

<style>
.example-1 {
    width: 100px;
    height: 100px;
    background-color: #d62e2e;
    
    animation-name: moveX;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
}
@keyframes moveX {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100px);   
    }
}
</style>

<div class="example-1"></div>
animation-play-state: paused;

Анимация поставлена на паузу

<style>
.example-2 {
    width: 100px;
    height: 100px;
    background-color: #d62e2e;
    
    animation-name: moveX;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: paused;
}
@keyframes moveX {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100px);   
    }
}
</style>

<div class="example-2"></div>
animation-play-state: paused, running;

Состояние для разных анимаций элемента, если их указано несколько в animation-name

<style>
.example-3 {
    width: 100px;
    height: 100px;
    background-color: #d62e2e;
    
    animation-name: moveX, bgChange;
    animation-duration: 4s, 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: paused, running;
}
@keyframes moveX {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100px);   
    }
}
@keyframes bgChange {
    from {
        background: green;
    }
    to {
        background: red;
    }
}
</style>

<div class="example-3"></div>

Читайте также

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии