Свойство 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>