Свойство animation-fill-mode
Определяет, как нужно применять стили к объекту анимации до и после ее выполнения
animation-fill-mode: forwards;Пошаговый план! Как быстро научиться создавать сайты!
- поддерживается начиная с
- частичная поддержка до
- не поддерживается
Значения
animation-fill-mode: none;
Стили анимации не будут применены к элементу до и после ее выполнения
<style>
.example-1 {
width: 100px;
height: 100px;
background: black;
animation-name: moveX;
animation-duration: 3s;
animation-fill-mode: none;
animation-delay: 2s;
}
@keyframes moveX {
from {
background: red;
transform: translateX(0);
}
to {
background: green;
transform: translateX(100px);
}
}
</style>
<div class="example-1"></div>animation-fill-mode: forwards;
По окончании анимации элемент сохранит стили последнего ключевого кадра
<style>
.example-2 {
width: 100px;
height: 100px;
background: black;
animation-name: moveX;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-delay: 2s;
}
@keyframes moveX {
from {
background: red;
transform: translateX(0);
}
to {
background: green;
transform: translateX(100px);
}
}
</style>
<div class="example-2"></div>animation-fill-mode: backwards;
Стили анимации первого кадра будут применены к элементу до ее запуска
<style>
.example-3 {
width: 100px;
height: 100px;
background: black;
animation-name: moveX;
animation-duration: 3s;
animation-fill-mode: backwards;
animation-delay: 2s;
}
@keyframes moveX {
from {
background: red;
transform: translateX(0);
}
to {
background: green;
transform: translateX(100px);
}
}
</style>
<div class="example-3"></div>animation-fill-mode: both;
Стили к элементу применяются до и после воспроизведения анимации, как если бы значения forwards и backwards были заданы одновременно
<style>
.example-4 {
width: 100px;
height: 100px;
background: black;
animation-name: moveX;
animation-duration: 3s;
animation-fill-mode: both;
animation-delay: 2s;
}
@keyframes moveX {
from {
background: red;
transform: translateX(0);
}
to {
background: green;
transform: translateX(100px);
}
}
</style>
<div class="example-4"></div>animation-fill-mode: both, forwards;
Применяет свойство animation-fill-mode для разных анимаций элемента, если их указано несколько
<style>
.example-5 {
width: 100px;
height: 100px;
background: black;
animation-name: moveX, bgChange;
animation-duration: 4s, 2s;
animation-fill-mode: both, forwards;
animation-delay: 2s;
}
@keyframes moveX {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
@keyframes bgChange {
from {
background: red;
}
to {
background: green;
}
}
</style>
<div class="example-5"></div>