html.okpython.net
Основы создания сайтов
CSS :: Свойство animation-fill-mode
css-свойство animation-fill-mode (от англ. animation fill mode – режим заполнения анимации) определяет, какие стили будут применяться к элементу до и после анимации.
Характеристики
- Значение по умолчанию: none.
- Применяется: ко всем элементам, а также к псевдоэлементам ::before и ::after.
- Наследуется: нет.
- Анимируется: нет.
- JavaScript: object.style.animationFillMode="value".
Синтаксис
animation-fill-mode: none | forwards | backwards | both
Значения
- backwards – во время старта анимации к элементу применяется стиль первого ключевого кадра, который будет сохраняться на весь период задержки анимации, установленный свойством animation-delay.
- forward – по окончании анимации к элементу применяется стиль последнего ключевого кадра.
- both – применяются оба значения: для момента запуска анимации применяется первое значение, т.е. backwards, а в момент финиша – второе, т.е. forward.
- none – данное значение применяется по умолчанию; стиль элемента до и после анимации остается неизменным, а если ранее было применено одно из значений backwards или forward, то их действия будут отменены.
Ссылки
Официальный сайт W3C: https://www.w3.org/TR/css-animations-1/#animation-fill-mode
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/animation-fill-mode
Примеры
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> div{ margin-top: 3em; overflow: hidden; white-space: nowrap; padding: 1em; width: 460px; height: 50px; border: solid 4px red; } /* Задаем общие свойства анимации */ .anim{ animation-name: example_1; animation-duration: 4s; animation-timing-function: ease-in-out; animation-delay: 3s; animation-direction: alternate; animation-iteration-count: 1; } /* Задаем ключевые кадры анимации */ .anim_fill_mode_1{ animation-fill-mode: backwards; } .anim_fill_mode_2{ animation-fill-mode: forward; } /* Анимируем ширину элемента */ @keyframes example_1{ from{ width: 0px; } to{ width: 500px; } } </style> </head> <body> <div class="anim anim_fill_mode_1">animation-fill-mode: backwards</div> <div class="anim anim_fill_mode_2">animation-fill-mode: forward</div> </body> </html>
Пример №1