animation-fill-mode
Поддержка браузерами
12.0+ | 10.0+ | 16.0+ | 43.0+ | 12.1+ | 9.0+ |
Описание
CSS свойство animation-fill-mode определяет какие стили будут применяться к анимируемому элементу до запуска анимации и после её выполнения.
Значение по умолчанию: | none |
---|---|
Применяется: | ко всем элементам и псевдо-элементам ::before и ::after |
Анимируется: | нет |
Наследуется: | нет |
Версия: | CSS3 |
Синтаксис JavaScript: | object.style.animationFillMode="forwards" |
Синтаксис
animation-fill-mode: none|forwards|backwards|both;
Значения свойства
Значение | Описание |
---|---|
backwards | Как только анимация будет применена, на всё время задержки её запуска используются значения, определённые для позиции 0% её ключевого кадра. |
forwards | Как только анимация будет завершена, значения, определённые в последнем ключевом кадре, сохранятся до тех пор, пока стиль анимации не будет удалён из любого селектора, нацеленного на данный узел. |
both | Реализуются оба значения, и forwards и backwards, как только анимация будет завершена и перед тем как она будет запущена. |
none | Значение по умолчанию, не приводит ни к каким действиям или же удаляет любые действия, связанные с применением значений forwards и backwards. |
Пример
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Пример</title> <style type="text/css"> .module { width: 150px; display: inline-block; } .wrapper { width: 100px; height: 100px; border-radius: 5px; border: 1px dashed grey; display: inline-block; } .element { width: 100px; height: 100px; border-radius: 5px; background-color: purple; transform-origin: bottom left; } .container:hover .element { animation-name: rotate; animation-duration: 1s; animation-timing-function: cubic-bezier(.18, 1.03, .5, 1.62); } .element-2 { animation-fill-mode: forwards; } .element-3 { animation-delay: 1s; animation-fill-mode: backwards; } .element-4 { animation-delay: 1s; animation-fill-mode: both; } @keyframes rotate { 0% { background-color: orange; transform: rotate(0deg); } 100% { transform: rotate(90deg); background-color: #0099CC; } } </style> </head> <body> <div class="container"> <p> Наведите курсор на область, чтобы применить анимацию к элементам. </p> <div class="module"> <p><code>none</code></p> <div class="wrapper"> <div class="element element-1"></div> </div> </div> <div class="module"> <p><code>forwards</code></p> <div class="wrapper"> <div class="element element-2"></div> </div> </div> <div class="module"> <p><code>backwards</code></p> <div class="wrapper"> <div class="element element-3"></div> </div> </div> <div class="module"> <p><code>both</code></p> <div class="wrapper"> <div class="element element-4"></div> </div> </div> </div> </body> </html>
Результат данного примера в окне браузера:
Наведите курсор на область, чтобы применить анимацию к элементам.
none
forwards
backwards
both