CSS animation-play-state — пауза й відновлення анімації

Властивість animation-play-state визначає, програвати анімацію чи поставити її на паузу. При продовженні встановленої на паузі анімації вона починається з того моменту де була зупинена.

Демонстрація анімації може бути призупинена, якщо для властивості animation-play-state задано значення paused. Щоб продовжити демонстрацію, встановіть для неї значення running.

На прикладі ми бачимо, що елемент із animation-play-state: running; анімується, без цієї властивості - ні:

правити

Загальний опис

правити

Порада

Рекомендується використовувати універсальну властивість animation, щоб задавати всі властивості відразу в одному місці. Це робить стилі більш зрозумілішими та зменшує їхній обсяг.

автор: Svitlana правити

Нотатка

Ця властивість використовується в JavaScript, щоб призупинити анімацію в середині циклу.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

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

Властивість animation-play-state може отримувати 4 значень:

paused

Призупинити анімацію.

автор: Svitlana

правити

running

Програвати анімацію. Без задання

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента (якщо відповідна властивість встановлена)

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	43	16	9	30	12	10

Підтримка: мобільні переглядачі

Переглядач
	43	43	16	9

Приклади

+ запропонувати свій приклад у пісочниці

<div class="box">наведи — поїду</div>

.box {
    width: 200px;
    padding: 8px;
    background: #0172ad;
    color: #fff;
    position: relative;
    animation: mymove 3s infinite;
    animation-play-state: paused;
}

.box:hover {
    animation-play-state: running;
}

@keyframes mymove {
    from { left: 0; }
    to   { left: 160px; }
}

<div class="wrapper">
  <div class="block block-1">
    <span>running</span>
  </div>
  <div class="block block-2">
    <span>paused</span>
  </div>
</div>

body {
  padding: 36px;
  text-align: center;
  font-family: monospace;
  font-size: 17px;
  color: #222;
  line-height: 1.45; 
}

#btn {
  cursor: pointer;
  width: 250px;
  text-align: center;
  padding: 6px 12px;
  font-size: 19px;
  display: inline-block;
}

@keyframes animate {
  
  from { 
    margin-top: 0; 
  }
  
  to   { 
    margin-top: 100px; 
  }
  
}

.wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.block {
  background-color: red;
  padding: 36px 0;
  width: 175px;
  text-align: center;
  color: #fff;
  font-size: 15px;
  border: 2px solid rgba(255, 255, 255, .45);
  
  animation-name: animate;
  animation-duration: 1.25s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
  animation-delay: 0s;
  animation-direction: alternate;
  animation-play-state: paused;
}

.block-1 {
  animation-play-state: running;
}

<p>Тицяй на кнопку, щоб запустити анімацію:</p>

<button id="btn">Запустити анімацію</button>

<hr>

<div class="wrapper">
  <div class="block">
    <span id="text">Я просто стою на місці</span>
  </div>
</div>

body {
  padding: 36px;
  text-align: center;
  font-family: monospace;
  font-size: 17px;
  color: #222;
  line-height: 1.45; 
}

#btn {
  cursor: pointer;
  width: 250px;
  text-align: center;
  padding: 6px 12px;
  font-size: 19px;
  display: inline-block;
}

@keyframes animate {
  
  from { 
    margin-top: 50px; 
  }
  
  to   { 
    margin-top: 100px; 
  }
  
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.block {
  background-color: red;
  padding: 26px 8px;
  width: 70%;
  text-align: center;
  color: #fff;
  font-size: 15px;
  border: 2px solid rgba(255, 255, 255, .45);
  
  animation-name: animate;
  animation-duration: 1.25s;
  animation-timing-function: ease-in;
  animation-delay: 0s;
  animation-direction: alternate;
  animation-play-state: paused;
  animation-iteration-count: infinite;
}

var block = document.getElementsByClassName('block')[0];
var btn = document.getElementById('btn');
var text = document.getElementById('text');

btn.onclick = function () {
  block.style.animationPlayState = block.style.animationPlayState == 'paused' ? 'running' : 'paused';
  btn.innerHTML = block.style.animationPlayState == 'paused' ? 'Запустити анімацію' : 'Зупинити анімацію';
  text.innerHTML = block.style.animationPlayState == 'paused' ? 'Я просто стою на місці' : 'Юхуууу';
};
//# sourceURL=pen.js