CSS animation-fill-mode — який стан лишається до й після анімації

Властивість animation-fill-mode визначає, які стилі повинні застосовуватися до елементу, коли анімація не відтворюється. Наприклад, після її завершення або при зупинці. Без задання, в момент закінчення анімації стиль елемента повертається до вихідного, властивість animation-fill-mode дозволяє змінити цю поведінку і зробити так, щоб стиль елемента залишався як у останнього ключового кадру.

Наприклад, якщо ви робите виїжджаюче від краю вікна браузера повідомлення, то після закінчення анімації повідомлення повернеться назад за край екрана. Значення forwards властивості animation-fill-mode змінює цю поведінку і залишає стиль на момент завершення руху. Таким чином, повідомлення плавно висунеться з-за краю вікна і залишиться на місці.

Значення forwards - застосовується до елементу по закінченню анімації та визначає стиль останнього ключового кадру. Яким буде цей кадр в послідовності анімації залежить від комбінації значень властивостей animation-direction і animation-iteration-count (табл.).

Значення backwards - до елементу застосовується стиль першого ключового кадру і він залишається на протязі періоду заданого animation-delay. Перший ключовий кадр визначається на підставі значення animation-direction (табл.).

правити

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

правити

Порада

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

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

Порада

Зверніть увагу, що порядок у визначенні властивості має дуже важливий. Перший значення у формі часу, розглядається як animation-duration, а другий - як animation-delay.

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

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

Синтаксис

animation-fill-mode: none|forwards|backwards|both|initial|inherit;

Властивість animation-fill-mode може отримувати 6 значень:

none

До елементу не буде застосовано ніяких стилів.

автор: Svitlana

правити

forwards

До елементу по закінченню анімації застосовується стиль останнього ключового кадру. Яким буде цей кадр в послідовності анімації залежить від комбінації значень властивостей animation-direction і animation-iteration-count

автор: Svitlana

правити

backwards

До елементу застосовується стиль першого ключового кадру і він залишається на протязі періоду заданого animation-delay. Перший ключовий кадр визначається на підставі значення animation-direction

автор: Svitlana

правити

both

До елементу застосовуються обидва правила, як для forwards, так і для backwards

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

Переглядачі

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

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

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

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

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

Приклади

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

<p class="block block-1"><code>animation-iteration-count: 2;</code></p>

<p class="block block-2"><code>animation-iteration-count: 15;</code></p>

body {
  line-height: 1.45;
  font-family: Ubuntu, sans-serif;
  font-size: 17px;
  color: #252525;
}

.block {
  padding: 16px; 
  animation-name: jump;
  animation-duration: 1.75s;
  animation-timing-function: linear;
  animation-delay: 2.5s;
  animation-direction: alternate;
  animation-fill-mode: both; 
}

.block..block-1 {
  animation-iteration-count: 2;
}

.block.block-2 {
  animation-iteration-count: 15;
}

@keyframes jump {
  from {
    margin-top: 0;
    background-color: #666;
    color: #f1f1f1;
  }
  to {
    margin-top: 15%;
    background-color: #808080;
    color: #252525;
  }
}

<p>Різні значення для <code>animation-fill-mode</code> у дії:</p>

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

<hr>

<div class="wrapper">
  <div class="block block-1">
    <span>none</span>
  </div>
  <div class="block block-2">
    <span>forwads</span>
  </div>
  <div class="block block-3">
    <span>backwards</span>
  </div>
  <div class="block block-4">
    <span>both</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: space-between;
  align-items: flex-start;
}

.block {
  background-color: red;
  padding: 26px 8px;
  width: 125px;
  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-iteration-count: 1;
  animation-direction: normal;
  animation-play-state: paused;
}

.block-1 {
  animation-fill-mode: none;
}
.block-2 {
  animation-fill-mode: forwads;
}
.block-3 {
  animation-fill-mode: backwards;
}
.block-4 {
  animation-fill-mode: both;
}

var blocks = document.getElementsByClassName('block');
var btn = document.getElementById('btn');

btn.onclick = function () {
  for (var i = 0; i < blocks.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    blocks[i].style.animationPlayState = 'running';
  }window.CP.exitedLoop(0);
};
//# sourceURL=pen.js

<div>Після анімації блок лишається праворуч</div>

div {
  width: 220px;
  padding: 8px;
  background-color: #2a9d8f;
  color: #fff;
  animation-name: moveRight;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@keyframes moveRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(120px);
  }
}