Animation fill mode: animation-fill-mode — CSS: Cascading Style Sheets

Содержание

Свойство animation-fill-mode | CSS справочник

CSS свойства

Определение и применение

CSS свойство animation-fill-mode задает стиль для элемента, когда анимация не воспроизводится (когда она будет закончена, или, когда она имеет задержку, установленную свойством animation-delay).

Обращаю Ваше внимание на то, что, как правило, удобнее использовать сокращенное обозначение свойства анимации — animation, чтобы установить все свойства анимации в одном объявлении.

Поддержка браузерами

Свойство
Chrome

Firefox

Opera

Safari

IExplorer

Edge
animation-fill-mode43.0
4.0
-webkit-
16.0
5.0
-moz-
30.0
15.0
-webkit-
9.0
4.0
-webkit-
10.012.0

CSS синтаксис:

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

JavaScript синтаксис:

object. style.animationFillMode = "both"

Значения свойства

ЗначениеОписание
none К элементу не применяются какие-либо стили до (во время задержки) или после воспроизведения анимации. Значение по умолчанию.
forwardsПо окончанию анимации к элементу применяется стиль последнего ключевого кадра. Каким будет этот кадр зависит от сочетания значений свойств animation-direction и animation-iteration-count:
animation-direction
(значение по умолчанию normal)
animation-iteration-count
(значение по умолчанию 1)
Значение последнего
ключевого кадра
normalчетное или нечетное число100% или to
reverseчетное или нечетное число0% или from
alternateчетное число0% или from
alternateнечетное число100% или to
alternate-reverseчетное число 100% или to
alternate-reverseнечетное число0% или from
backwardsК элементу применяется стиль первого ключевого кадра, действие сохраняется на протяжении периода заданного свойством animation-delay. Первый ключевой кадр определяется на основании значения animation-direction:
animation-direction
(значение по умолчанию normal)
Значение первого
ключевого кадра
normal0% или from
alternate0% или from
reverse100% или to
alternate-reverse100% или to
bothК элементу применяются оба значения: forwards и backwards (как только анимация будет завершена и перед тем как она будет запущена — во время задержки).
initial
Устанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Использование свойства animation-fill-mode</title>
<style>
div {
width: 100px; /* ширина элемента */
height: 100px; /* высота элемента */
color: white; /* цвет шрифта */
background: green; /* цвет заднего фона */
display: inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
position: relative; /* элемент с относительным позиционированием  */
animation-name: iliketomoveit; /* имя анимации */
animation-duration: 5s; /* продолжительность анимации */
animation-animation-delay: 2s; /* анимация воспроизводится c задержкой 2 секунды  */
}
.
test
{ animation-fill-mode: none; /* не применяются какие-либо стили до (во время задержки), или после воспроизведения анимации */ } .test2 { animation-fill-mode: forwards; /* по окончанию анимации применяется стиль последнего ключевого кадра (красный фон) */ } .test3 { animation-fill-mode: backwards; /* применяется стиль первого ключевого кадра, действие сохраняется на протяжении периода задержки. */ } .test4 { animation-fill-mode: both; /* применяются оба значения: forwards и backwards (как только анимация будет завершена и перед тем как она будет запущена - во время задержки). */ } @keyframes iliketomoveit { 0% {background: yellow;} /* задаем цвет заднего фона при начале анимации */ 100% {background: red;} /* задаем цвет заднего фона по завершению анимации */ } </style> </head> <body> <div class = "test">none</div> <div class = "test2">forwards</div> <div class = "test3">backwards</div> <div class = "test4">both</div> </body> </html>

В этом примере мы создали анимацию продолжительностью 5 секунд (animation-duration), в которой происходит изменение цвета заднего фона элемента. При этом анимация имеет задержку равную 2 секундам (animation-delay).

С использованием селектора класса и свойства animation-fill-mode мы указали различные значения, которые определяют стиль для элемента, когда анимация не воспроизводится (когда она будет закончена, или, когда она имеет задержку):

  • Первый элемент — к элементу не применяются какие-либо стили до (во время задержки), или после воспроизведения анимации. Это значение по умолчанию.
  • Второй элемент — по окончанию анимации к элементу
    применяется стиль последнего ключевого кадра
    (красный фон).
  • Третий элемент — к элементу применяется стиль первого ключевого кадра, действие сохраняется на протяжении периода задержки. Элемент на протяжении периода задержки отображается желтым цветом (первый ключевой кадр).
  • Четвертый элемент — к элементу применяются оба значения: forwards и backwards (как только анимация будет завершена и перед тем как она будет запущена — во время задержки). Элемент на протяжении периода задержки отображается желтым цветом (первый ключевой кадр), а по окончанию получит красный фон
Пример использования CSS свойства animation-fill-mode.CSS свойства

Свойство animation-fill-mode — состояние анимации перед началом и после окончания

Свойство animation-fill-mode устанавливает в каком положении останавливаться анимации после окончания. По умолчанию анимация возвращается в первоначальное значение и это может выглядеть не очень красиво.

Синтаксис

селектор { animation-fill-mode: backwards | forwards | both | none; }

Значения

Значение Описание
none Если установлена задержка анимации — то в течении времени задержки элемент будет оставаться на месте, а потом скачком перейдет к 0% кадру. После окончания анимации элемент не останется в том состоянии, где остановился, а перепрыгнет в начальное состояние.
backwards Заставляет элемент двигаться после загрузки страницы к 0% кадру, даже если установлена задержка animation-delay, и оставаться там, пока не начнется анимация. После окончания анимации элемент не останется в том состоянии, где остановился, а перепрыгнет в начальное состояние.
forwards Указывает браузеру, что после окончания анимации элемент останется в том состоянии, где остановился.
both Включает в себя backwards и forwards — после загрузки страницы элемент установится к 0% кадру, а после окончания анимации элемент останется там, где остановился.

Значение по умолчанию: none.

Пример . Значение none

В данном примере margin-left установлен в значение 300px для элемента, а для первого кадра анимации — в 0px. Так как нет задержки animation-delay, то элемент после загрузки страницы станет в 0px, а не в

300px. Кроме того,анимация после окончания будет перепрыгивать в начальное значение:

<div></div>@keyframes move { from { margin-left: 0; } to { margin-left: 400px; } } #elem { margin-left: 300px; animation-fill-mode: none; animation-delay: 0s; animation-duration: 3s; animation-name: move; animation-iteration-count: infinite; animation-timing-function: linear; border: 1px solid black; width: 50px; height: 50px; }

:

Пример . Значение none

В данном примере margin-left установлен в значение 300px для элемента, а для первого кадра анимации — в 0px. Также для элемента установлена задержка animation-delay в 3 секунды, поэтому элемент после загрузки страницы станет в 300px, а не в 0px, и будет стоять там

3 секунды после начала анимации а потом скачком перейдет к 0px — и анимация начнется оттуда. Кроме того,анимация после окончания будет перепрыгивать в начальное значение:

<div></div>@keyframes move { from { margin-left: 0; } to { margin-left: 400px; } } #elem { margin-left: 300px; animation-fill-mode: none; animation-delay: 0s; animation-duration: 3s; animation-name: move; animation-iteration-count: infinite; animation-timing-function: linear; border: 1px solid black; width: 50px; height: 50px; }

:

Пример . Значение backwards

В данном примере margin-left установлен в значение 300px для элемента, а для первого кадра анимации — в 0px. Также для элемента установлен

animation-fill-mode в значении backwards, поэтому элемент после загрузки страницы станет в 0px, а не в 300px, как это было для animation-fill-mode в значении none. Кроме того,анимация после окончания будет перепрыгивать в начальное значение:

<div></div>@keyframes move { from { margin-left: 0; } to { margin-left: 400px; } } #elem { margin-left: 300px; animation-fill-mode: backwards; animation-delay: 0s; animation-duration: 3s; animation-name: move; animation-iteration-count: infinite; animation-timing-function: linear; border: 1px solid black; width: 50px; height: 50px; }

:

Пример . Значение none и количество повторений равно 1

В данном примере margin-left установлен в значение 300px для элемента, а для первого кадра анимации — в 0px. Также для элемента установлена задержка animation-delay в 3 секунды, поэтому элемент после загрузки страницы станет в 300px, а не в 0px, и будет стоять там 3 секунды после начала анимации а потом скачком перейдет к 0px — и анимация начнется оттуда. Так как animation-fill-mode установлен в значении none, то после проигрывания анимации элемент вернется в начальное значение:

<div></div>@keyframes move { from { margin-left: 0; } to { margin-left: 400px; } } #elem { margin-left: 300px; animation-fill-mode: none; animation-delay: 3s; animation-duration: 3s; animation-name: move; animation-iteration-count: 1; animation-timing-function: linear; border: 1px solid black; width: 50px; height: 50px; }

:

Пример . Значение forwards и количество повторений равно 1

В данном примере animation-fill-mode установлен в значении forwards, а число повторений анимации — в 1. После проигрывания анимации элемент останется в том положении, где закончилась анимация, а не прыгнет в исходную точку.

Кроме того, margin-left установлен в значение 300px для элемента, а для первого кадра анимации — в 0px. Также для элемента установлена задержка animation-delay в 3 секунды, поэтому элемент после загрузки страницы станет в 300px, а не в 0px, и будет стоять там 3 секунды после начала анимации, а потом скачком перейдет к 0px — и анимация начнется оттуда:

@keyframes move { from { margin-left: 0; } to { margin-left: 400px; } } #elem { margin-left: 300px; animation-fill-mode: forwards; animation-delay: 3s; animation-duration: 3s; animation-name: move; animation-iteration-count: 1; animation-timing-function: linear; border: 1px solid black; width: 50px; height: 50px; }

:

Пример . Значение both и количество повторений равно 1

В данном примере animation-fill-mode установлен в значении both, а число повторений анимации — в 1. После загрузки страницы элемент будет стоять в первом кадре анимации (в 0px, а не в 300px), а после проигрывания анимации элемент останется в том положении, где закончилась анимация, а не прыгнет в исходную точку:

@keyframes move { from { margin-left: 0; } to { margin-left: 400px; } } #elem { margin-left: 300px; animation-fill-mode: both; animation-delay: 3s; animation-duration: 3s; animation-name: move; animation-iteration-count: 1; animation-timing-function: linear; border: 1px solid black; width: 50px; height: 50px; }

:

Смотрите также

  • свойство animation-name,
    которое задает имя анимации
  • свойство animation-duration,
    которое задает продолжительность анимации
  • свойство animation-delay,
    которое задает задержку перед выполнением анимации
  • свойство animation-timing-function,
    которое задает скорость выполнения анимации
  • свойство animation-iteration-count,
    которое задает количество итераций анимации
  • свойство animation-direction,
    которое задает направление анимации
  • свойство animation-play-state,
    которое позволяет поставить анимацию на паузу
  • свойство animation,
    представляющее собой сокращение для анимаций
  • команду @keyframes,
    задающую ключевые кадры анимации
  • плавные переходы transition, представляющие собой анимацию по наведению на элемент

css властивість animation-fill-mode

  • Головна
  • css
  • властивості
  • animation-fill-mode

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

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

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

animation-direction animation-iteration-count Значення
normal будь-яке число 100% або to
reverse будь-яке число 0% або from
alternate парне число 0% або from
alternate непарне число 100% або to
alternate-reverse парне число 100% або to
alternate-reverse непарне число 0% або from

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

animation-direction Значення
normal або alternate 0% або from
reverse або alternate-reverse 100% або to
Порада:

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

Порада:

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

Запропонувати свою пораду чи нотатку

ПорадаНотатка

Синтакс

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

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

none

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

forwards

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

backwards

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

both

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

initial

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

inherit

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

Значення без задання: none
Наслідує: Ні
Анімується: Ні
JavaScript синтаксис: object. style.animationFillMode=»forwards»

Переглядачі

  • Стаціонарні переглядачі
  • Мобільні переглядачі
Переглядач
animation-fill-mode

43.0
3.0 -webkit-

10.0

16.0
5.0 -moz-

9.0
4.0 -webkit-

12.10
12.0 -o-

12.0

Переглядач
animation-fill-mode

2. 0 -webkit-

16.0
5.0 -moz-

9.2
4.0 -webkit-

Приклади

  • Приклад 1
  • Приклад 2
  • Приклад 3

Демонстрація різних значень у дії

Простий приклад дії властивості

Анімація руху з одного місця в інше

div { 


  -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */ 


  animation-fill-mode: forwards; 


}

Додаткові посилання

animation

animation-play-state

animation-name

animation-duration

animation-direction

animation-delay

animation-iteration-count

animation-timing-function

keyframes

fill-mode — CSS-свойство animation-fill-mode устанавливает,как CSS-анимация применяет стили к своему

Свойство CSS animation-fill-mode устанавливает, как CSS-анимация применяет стили к своей цели до и после ее выполнения.

Try it

Часто удобно использовать сокращенное свойство animation для одновременной установки всех свойств анимации.

Syntax

/ * Одиночная анимация * /
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;
/ * Несколько анимаций * /
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;
/ * Глобальные значения * /
animation-fill-mode: inherit;
animation-fill-mode: initial;
animation-fill-mode: revert;
animation-fill-mode: revert-layer;
animation-fill-mode: unset;

Values

none

Анимация не будет применять никаких стилей к цели,когда она не выполняется.Вместо этого элемент будет отображаться с использованием любых других CSS правил,применяемых к нему.Это значение по умолчанию.

forwards

Цель сохранит вычисленные значения, установленные последним ключевым кадром, обнаруженным во время выполнения. Последний ключевой кадр зависит от значения animation-direction и animation-iteration-count :

animation-direction animation-iteration-count последний встреченный ключевой кадр
normal чётный или нечётный 100% или to
reverse чётный или нечётный 0% или from
alternate even 0% или from
alternate odd 100% или to
alternate-reverse even 100% или to
alternate-reverse odd 0% или from
backwards

Анимация будет применять значения, определенные в первом соответствующем ключевом кадре, как только она будет применена к цели, и сохранит это в течение периода animation-delay . Первый соответствующий ключевой кадр зависит от значения animation-direction :

animation-direction первый соответствующий ключевой кадр
normal или alternate 0% или from
reverse или alternate-reverse 100% или to
both

Анимация будет осуществляться по правилам как в прямом,так и в обратном направлении,таким образом,расширяя свойства анимации в обоих направлениях.

Примечание. Когда вы указываете несколько значений, разделенных запятыми , в свойстве animation-* , они будут назначены анимациям, указанным в свойстве animation-name , разными способами в зависимости от их количества. Дополнительные сведения см. в разделе Установка нескольких значений свойств анимации .

Formal definition

Initial value none
Applies to все элементы, ::before того и ::after псевдо-элементов
Inherited no
Computed value as specified
Animation type discrete

Formal syntax

<single-animation-fill-mode>#where <single-animation-fill-mode> = none | forwards | backwards | both

Examples

Вы можете увидеть эффект animation-fill-mode в следующем примере. Он демонстрирует, как для анимации, которая выполняется в течение бесконечного времени, вы можете заставить ее оставаться в своем конечном состоянии, а не возвращаться в исходное состояние (которое используется по умолчанию).

HTML

<p>Move your mouse over the gray box!</p>
<div>
 <div>This grows and stays big.</div>
  <div>This just grows. </div>
</div>

CSS

.demo {
  border-top: 100px solid #ccc;
  height: 300px;
}
@keyframes grow {
  0% { font-size: 0; }
  100% { font-size: 40px; }
}
.demo:hover .grows {
  animation-name: grow;
  animation-duration: 3s;
}
.demo:hover .growsandstays {
  animation-name: grow;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

Result

Дополнительные примеры см. В разделе « Анимация CSS» .

Specifications

Specification
Анимация CSS Уровень 2
# animation-fill-mode

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox для Android Opera Android Safari на IOS Samsung Internet
animation-fill-mode

43

3

12

12

49

16

5

10

30

15

12. 1-15

12-15

9

5

43

≤37

43

18

49

16

5

30

14

12.1-14

12-14

9

4

4.0

1.0

See also

  • Использование CSS анимации
  • JavaScript AnimationEvent API

© 2005–2021 Авторы MDN.
Лицензия Creative Commons Attribution-ShareAlike License v2.5 или более поздняя.
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

CSS animation-fill-mode Свойство

❮ Предыдущий Полное руководство по CSS Далее ❯


Пример

Пусть элемент

сохранит значения стиля из последнего ключевого кадра когда анимация заканчивается:

div {
  режим анимации-заполнения: вперед;
}

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.


Определение и использование

Свойство animation-fill-mode определяет стиль элемента, когда анимация не воспроизводится (до он начинается, после того, как он заканчивается, или и то, и другое).

Анимация CSS не влияет на элемент до воспроизведения первого ключевого кадра или после воспроизведения последнего ключевого кадра. Свойство animation-fill-mode может переопределить это поведение.

Значение по умолчанию: нет
Унаследовано: нет
Анимация: № Читать о анимированном
Версия: CSS3
Синтаксис JavaScript: объект .style.animationFillMode=»вперед» Попытайся


Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Числа, за которыми следует -webkit-, -moz- или -o-, указывают на первую версию, которая работала с префиксом.

Собственность
режим анимации-заполнения 43.0
4.0 -вебкит-
10,0 16,0
5,0 -моз-
9.0
4.0 -вебкит-
30,0
15,0 -вебкит-
12,1
12,0 -о-



Синтаксис CSS

режим анимации-заполнения: нет|вперед|назад|оба|начальный|наследовать;

Значения свойств

Значение Описание
нет Значение по умолчанию. Анимация не будет применять стили к элементу до или после его выполнения
вперед Элемент сохранит значения стиля, установленные последним ключевым кадром (зависит от направления анимации и количества итераций анимации)
назад Элемент получит значения стиля, заданные первым ключевым кадром (зависит от направления анимации), и сохранит их во время в период задержки анимации
оба Анимация будет следовать правилам как вперед, так и назад, расширяя свойства анимации в обоих направлениях
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать


Другие примеры

Пример

Пусть элемент

получит значения стиля, установленные первым ключевым кадром перед анимация начинается (в период задержки анимации):

div {
  animation-fill-mode: назад;
}

Попробуйте сами »

Пример

Пусть элемент

получит значения стиля, установленные первым ключевым кадром перед начинается анимация и сохраняются значения стиля из последнего ключевого кадра, когда анимация заканчивается:

div {
  режим анимации-заполнения: оба;
}

Попробуйте сами »


Связанные страницы

Учебник CSS: Анимации CSS

Ссылка HTML DOM: свойство animationFillMode

❮ Предыдущая Полное руководство по CSS Далее ❯


НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА
КОД ИГРЫ

Играть в игру




Top Tutorials
Учебник по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3. CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery


FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Свойство CSS animation-fill-mode, объяснение

CSS-анимация — это простой и легкий способ добавить изюминку веб-странице. Их не так уж сложно реализовать, и они не будут замедлять работу ваших страниц, как видео, гифки или Flash-анимация, которыми печально известны.

Однако иногда эти анимации могут вести себя не совсем так, как вы ожидаете или хотите, просто из-за того, как анимации CSS работают по умолчанию

Например, предположим, что я хочу анимировать автомобиль, едущий по экрану, для моего веб-сайта, посвященного такси/попутчикам/доставке. Посмотрите, что произойдет, когда анимация закончится:

См. Режим заливки анимации пера: режим без заливки Кристины Перриконе (@hubspot) на CodePen.

Вы это видели? (Если нет, нажмите Rerun в правом нижнем углу. ) После того, как машина перестанет двигаться, она вернется в исходное положение. Было бы намного лучше, если бы машина оставалась по другую сторону экрана после завершения, верно? Как мы можем это сделать?

Ответ со свойством CSS animation-fill-mode . В этом руководстве мы объясним, что делает это свойство и почему это может быть скрытое свойство CSS, необходимое для работы ваших анимаций.

Что такое режим заполнения анимации CSS?

В отличие от других свойств анимации, таких как animation-iteration-count и animation-delay, из названия не ясно, что на самом деле делает animation-fill-mode . Позвольте нам объяснить.

Режим анимации-заполнения Свойство CSS управляет стилями анимированного элемента вне его исполнения. Другими словами, он управляет тем, как выглядит элемент до начала анимации и/или после ее окончания.

По умолчанию стили CSS-анимации применяются только во время ее выполнения. Вот почему в приведенном выше примере мы видели сброс автомобиля — как только анимация закончилась, элемент изображения вернулся к своему исходному стилю (то есть к исходному положению). С анимация-заливка-режим , мы можем изменить это.

CSS animation-fill-mode Синтаксис

Свойство animation-fill-mode записывается следующим образом:

 
animation-fill-mode: none | вперед | назад | оба | начальная | наследовать;

Как и другие свойства animation-* , animation-fill-mode помещается в блок объявлений для элемента, который вы хотите анимировать.

CSS animation-fill-mode Значения

animation-fill-mode принимает четыре основных значения: вперед , назад , оба и нет . Давайте распакуем каждый из них.

forwards

При назначении animation-fill-mode: forwards целевой элемент сохранит значения стиля, установленные в последнем ключевом кадре анимации. После окончания анимации элемент не будет сбрасывать свои стили.

Подождите, похоже, это именно то, что нам нужно для анимации автомобиля! Давайте попробуем пример снова, на этот раз с анимация-заливка-режим: применяется форвард .

См. Pen animation-fill-mode: forwards Кристины Перриконе (@hubspot) на CodePen.

Как мы и надеялись, машина остается в правой части экрана, когда анимация заканчивается.

Обратите внимание, что направление анимации, заданное свойством animation-direction , определяет, как будет выглядеть финальный кадр анимации. Например, если анимация-направление равно normal (по умолчанию), последний ключевой кадр будет иметь значение 100% (или от до ). Однако, если направление обратное , последний ключевой кадр (и, следовательно, сохраняемые стили) имеет значение 0% (или из ).

Значение пересылает , вероятно, является наиболее распространенным и полезным значением для этого свойства. Используйте его, чтобы предотвратить визуальный сброс анимированного элемента после завершения анимации.

назад

При назначении animation-fill-mode: назад , целевой элемент примет значения стиля, установленные первым ключевым кадром анимации в течение периода animation-delay . анимация-задержка устанавливает временную задержку до начала анимации, а анимация-заполнение-режим применяется во время этой задержки.

Для демонстрации я добавил еще пару правил к нашему примеру с автомобилем. Есть анимация-задержка из 3 с (три секунды) и дополнительный стиль к объявлению @keyframes , который вращает автомобиль (чтобы он выглядел так, как будто он движется быстро, как это делают автомобили).

См. режим анимации-заполнения пера: назад от Кристины Перриконе (@hubspot) на CodePen.

При применении режима animation-fill-mode: reverse изображение принимает стили из первого ключевого кадра в течение этого трехсекундного периода задержки. В конце машина возвращается к своему стилю до анимации. (Если вы не уловили его в первый раз, нажмите Перезагрузить в правом нижнем углу.)

Значение назад не так широко применимо, как вперед , но это может быть полезно для более сложных анимационных последовательностей.

Также обратите внимание, что установка animation-direction: reverse заставит элемент принять стили последнего ключевого кадра анимации, а не первого ключевого кадра.

оба

animation-fill-mode: оба применяют правила назад и вперед : Элемент примет стили первого ключевого кадра до начала анимации и стили последнего ключевого кадра после анимация заканчивается.

См. режим заливки-анимации пера: оба варианта Кристины Перриконе (@hubspot) на CodePen.

Этот пример похож на предыдущий, за исключением того, что в конце машина не сбрасывается. Браво!

нет

нет — это значение по умолчанию для animation-fill-mode . При этом стили анимации не будут применяться к элементу до или после последовательности анимации. Вы можете использовать это значение для переопределения родительского значения — в противном случае в этом нет необходимости.

initial and inherit

animation-fill-mode также принимает глобальные значения initial и inherit . Initial устанавливает значение по умолчанию ( none ). наследует , задает такое же значение, как и его родительский элемент.

Управляйте анимацией в режиме анимации-заполнения.

Свойство animation-fill-mode может быть не самым эффектным свойством CSS, но оно может оказаться необходимым для многих типов анимации. Включение этого может помочь вашим анимациям выглядеть чище и предотвратить их сброс в конце последовательности. Только по этой причине это стоит знать.

Темы: CSS-анимация

Не забудьте поделиться этим постом!

CSS | animation-fill-mode Property — GeeksforGeeks

< html >

     < head >

         < заголовок >

             CSS | animation-fill-mode Property

         title >

         < style >

             h2 {

                 color:green ;

             }

             h2, p {

                 text-align:center;

}

H3 {

Ширина: 400px;

                 background-color: оранжевый;

                 имя-анимации: текст;

                 продолжительность анимации: 3 с;

}

#One {

Анимация-режим: нет;

}

#TWO {

Анимация-режим: Фордов;

             }

             #three {

                 анимация-заливка-режим: назад;

                 анимация-задержка: 2 с;

}

#FOUR {

Анимация-режим: оба;

                 анимация-задержка: 2 с;

             }

@KeyFrames Text {

Из {

MARGE-LEFT: 0%;

                    background-color: #aaaaaa;

}

до {

Мя-левые: 60%;

                    background-color: #008000;

                 }

             }

         style >

     head >

     < корпус >

         < H2 > Geeksforgeeks H2 >

< P > СОБСТВЕННАЯ НАМЕЧАЯ НАУКА. < H3 ID = "One"> none H3 >

< H3 ID = "0022 h3 >

         < h3 id="three">backwards h3 >

         < h3 id="four" > Оба H3 >

Body >

HTML
> .0022

animation-fill-mode · WebPlatform Docs

Сводка

Определяет, какие значения применяются анимацией вне времени ее выполнения (до и после анимации).

По умолчанию анимация не влияет на значения свойств между моментом ее применения (когда для элемента задано свойство animation-name) и временем начала выполнения (определяется свойством animation-delay). Кроме того, по умолчанию анимация не влияет на значения свойств после окончания анимации (определяется свойством animation-duration). свойство animation-fill-mode может переопределить это поведение.

Обзорная таблица

Исходное значение
нет
Применяется к
Все элементы, псевдоэлементы ::before и ::after.
Унаследовано
Нет
СМИ
визуальный
Расчетное значение
Как указано.
Анимируемый
Нет

Свойство объектной модели CSS
:

Проценты
Н/Д

Синтаксис

  • режим анимации-заполнения: назад
  • режим анимации-заполнения: оба
  • режим анимации-заполнения: вперед
  • режим анимации-заполнения: нет

Значения

нет
Значения свойств не изменяются до начала анимации и возвращаются в исходное состояние по окончании анимации. Это поведение по умолчанию.
нападающих
Когда анимация заканчивается (что определяется ее числом итераций анимации), свойства сохраняют значения, установленные последним ключевым кадром. Если animation-iteration-count равно нулю, примените значения, которые запустят первую итерацию.
|[направление-анимации](/css/properties/направление-анимации)|[количество-итераций-анимации](/css/properties/количество-анимаций-итераций)|последний обнаруженный ключевой кадр| |:------------------------------------------------ ------------------------|:----------------------------------------------------- ------------------------------|:------------------ ------| |`нормальный`|`четный` или `нечетный`|100% или `до`| |`обратное`|`четное` или `нечетное`|0% или `от`| |`альтернативный`|`четный`|0% или `от`| |`альтернативный`|`нечетный`|100% или `до`| |`альтернативный-обратный`|`четный`|100% или `до`| |`альтернативный-обратный`|`нечетный`|0% или `от`|
назад
Если анимация задерживается с помощью animation-delay, свойства принимают значения, установленные первым ключевым кадром в ожидании запуска анимации. Это либо значения ключевого кадра из (когда анимация-направление равно нормальный или альтернативный ), либо значения ключевого кадра от до (когда анимация-направление реверс или альтернативно-реверс ). Когда анимация заканчивается, свойства возвращаются в исходное состояние.
|[направление анимации](/css/properties/направление анимации)|первый соответствующий ключевой кадр| |:------------------------------------------------ ---------|:----------------------| |`нормальный` или `альтернативный`|0% или `от`| |`реверс` или `альтернативный-реверс`|100% или `до`|
оба
Значения, заданные первым и последним ключевыми кадрами, применяются до и после анимации.

Примеры

Пример мобильного интерфейса, в котором две параллельные анимации замещают содержимое заголовком баннера. Без какой-либо анимации оба элемента перекрывают одну и ту же область экрана. В moveContent анимация, режим заполнения вперед означает, что его конечное состояние (перемещение вниз) сохраняется после завершения выполнения. В анимации insertBanner режим заливки назад означает, что его начальное состояние (вне экрана) имеет приоритет над CSS элемента во время задержки перед выполнением анимации. (В последующей анимации scrollBanner для режима заполнения явно задано значение none , чтобы его начальное состояние не переопределяло состояние предыдущей анимации.)

 артикул {
    имя-анимации : moveContent;
    продолжительность анимации: 1 с;
    анимация-задержка: 4 с;
    количество итераций анимации: 1;
    анимация-заполнение-режим: вперед;
}
заголовок {
    имя-анимации : insertBanner , scrollBanner;
    длительность анимации: 1 с, 20 с;
    анимация-задержка: 4 с, 5 с;
    анимация-заливка-режим: назад, нет;
    число итераций анимации: 1, бесконечно;
}
@ключевые кадры moveContent {
    из {преобразовать: перевестиY(0em)}
    в {преобразовать: перевестиY(3em)}
}
@keyframes вставить баннер {
    из {преобразовать: перевестиY(-6em)}
    в { преобразование : translateY (0em) }
}
@keyframesscrollBanner {
    из { преобразование : перевести X (0) }
    17% {преобразовать: перевестиX(0%)}
    20% {преобразовать: перевестиX(-20%)}
    37% {преобразовать: перевестиX(-20%)}
    40% {преобразовать: перевестиX(-40%)}
    57% {преобразовать: перевестиX(-40%)}
    60% {преобразовать: перевестиX(-60%)}
    77% {преобразовать: перевестиX(-60%)}
    80% {преобразовать: перевестиX(-80%)}
    97% {преобразовать: перевестиX(-80%)}
    в { преобразование : translateX (0%) }
}
 

Просмотреть живой пример

Использование

 Также может быть списком режимов заливки, разделенных запятыми, например, вперед, без, назад, где каждый режим заливки применяется к соответствующему порядковому значению позиции свойства animation-name. 
 

Примечания

Это экспериментальная спецификация, поэтому она не полностью доработана. Синтаксис и поведение могут быть изменены в будущих версиях.

Связанные характеристики

Анимация CSS
Рабочий проект W3C

См. также

Другие статьи

  • Движение вещей с помощью анимации CSS3
  • @ключевые кадры
  • анимация
  • анимация-задержка
  • направление анимации
  • продолжительность анимации
  • число итераций анимации
  • имя-анимации
  • анимация-воспроизведение-состояние
  • функция синхронизации анимации

Внешние ресурсы

  • См. также примеры Val Head с обучающим видео.

Атрибуция

  • Новички
  • Концепции
  • HTML
  • УСБ
  • Доступность
  • JavaScript
  • ДОМ
  • SVG

Режим заполнения анимации

23 марта 2020 г.

На прошлой неделе я спросил своих подписчиков на YouTube, что самое сложное в CSS, и анимация стала одной из самых популярных тем. Это понятно, поскольку анимация — сложная тема, для освоения которой требуется глубокое понимание CSS. Чтобы сделать анимацию более доступной, я хочу поговорить о animation-fill-mode , которое является одним из самых важных свойств, которые нужно понимать при создании сложных анимаций.

Если вы хотите подробно изучить анимацию, ознакомьтесь с моим курсом Learn CSS Today, в котором есть целый раздел, посвященный исключительно анимации в CSS.

Что такое

режим анимации-заполнения ?

По умолчанию при запуске анимации CSS применяются все стили из ключевого кадра 0%. По мере анимации он будет изменять свойства на основе разных ключевых кадров, пока в конечном итоге не достигнет стилей из ключевого кадра 100%. Однако в этот момент все стили из анимации удаляются, и элемент возвращается в состояние по умолчанию до применения анимации. Давайте посмотрим на быстрый пример этого, чтобы понять, что происходит.

Наведи меня

Как вы можете видеть, если вы наведете курсор на элемент выше, цвет сразу же изменится на красный. Затем, после задержки в 0,5 секунды, цвет изменится на зеленый, что соответствует ключевому кадру 0%, и в течение 1,5 секунд цвет будет медленно меняться на фиолетовый. Наконец, в конце 1,5-секундного преобразования цвет снова изменится на красный. Это связано с тем, что по умолчанию для параметра animation-fill-mode установлено значение none , что означает, что до начала анимации и после ее завершения элемент не будет использовать какие-либо стили из ключевых кадров.

Очевидно, что это не всегда то поведение, которое вам нужно. Чтобы анимация использовала свои окончательные значения ключевых кадров (в нашем примере 100%) после завершения анимации, нам нужно изменить animation-fill-mode на forward . Используя точно такой же пример, но с animation-fill-mode , установленным на forward , мы получаем следующий результат.

Наведи меня

Теперь наш элемент сохраняет стили ключевого кадра 100% даже после завершения воспроизведения 1,5-секундной анимации. Это действительно полезно, когда вы хотите анимировать элемент в нужное положение и сохранить стили из финального ключевого кадра анимации.

Следующий тип animation-fill-mode — это назад , который делает то же самое, что и вперед , но использует первый ключевой кадр анимации и применяет эти стили к элементу до начала анимации. Если мы изменим наш предыдущий пример, чтобы использовать наоборот в качестве режима анимации-заполнения , мы получим следующий результат.

Наведи меня

Теперь наша анимация будет сразу использовать зеленый цвет из ключевого кадра 0%, как только мы наведем курсор на элемент. По сути, в течение всей 0,5-секундной задержки перед запуском анимации элемент будет использовать стили из первого ключевого кадра анимации, который в нашем примере является ключевым кадром 0%.

Конечным типом animation-fill-mode является оба , которые объединяют вместе назад и вперед , поэтому элемент использует первый ключевой кадр перед началом анимации и последний ключевой кадр после окончания анимации.

Наведи меня

При использовании и анимация будет начинаться с зеленого цвета, как только на нее будет наведен курсор, и останется фиолетовой даже после завершения анимации.

анимация-заполнение-режим Gotchas

На первый взгляд кажется, что назад всегда использует ключевой кадр 0%, а вперед всегда использует ключевой кадр 100%, но на самом деле это не так. В зависимости от значения анимация-направление и анимация-итерация-счетчик первый ключевой кадр анимации может фактически не быть 0%, а последний ключевой кадр не может быть 100%. Давайте рассмотрим простой пример использования animation-fill-mode из назад , но с анимация-направление из реверс .

Наведи меня

Теперь, когда наше направление изменено на противоположное, самый первый ключевой кадр нашей анимации равен 100%, что означает, что наш элемент использует свойства ключевого кадра 100% до начала анимации. Вот почему элемент сначала становится фиолетовым, затем медленно меняется на зеленый, а затем перескакивает на красный.

Аналогичная проблема возникает с режимом заливки вперед при использовании обратной анимации, но чередующаяся анимация с несколькими итерациями также может привести к тому, что конечный ключевой кадр не будет равен 100%. В следующем примере у нас есть анимация-направление из альтернатива и анимация-итераций из 2.

Hover Me

В этом примере цвет сначала становится красным при наведении, а затем через 0,5 секунды становится зеленым. Затем в течение 1,5 секунд цвет становится фиолетовым, а затем снова становится зеленым в течение еще 1,5 секунд. После завершения полного перехода анимация остается зеленой. Это связано с тем, что наш последний ключевой кадр анимации был равен 0 %, поскольку анимация выполнялась дважды, причем первая итерация менялась от 0 % до 100 %, а вторая — от 100 % до 0 %.

Важно знать направление и количество итераций анимации, чтобы точно знать, какой ключевой кадр будет первым, а какой последним.

Заключение

С анимацией может быть сложно работать, поскольку для ее полного использования требуется полное владение CSS. Затем сложность анимации усугубляется тем фактом, что она автоматически сбрасывается обратно в исходное состояние в конце анимации. К счастью, анимация-заливка-режим позволяет нам точно настроить стиль нашего элемента до и после запуска анимации. С этим свойством становится тривиальным создание сложных анимаций, в которых элементы постоянно переходят между двумя состояниями.

CSS animation-fill-mode

Свойство animation-fill-mode используется для указания стилей, которые будут применяться к указанному элементу, когда анимация не воспроизводится, т. е. до начала и после окончания анимации. анимация.

CSS
 режим анимации-заполнения: значение;
 

Анимации в CSS позволяют изменять состояние элемента. Хотя свойство animation-fill-mode используется для стилизации элементов, когда они не анимируются, существуют и другие свойства анимации, такие как имя-анимации , продолжительность анимации , функция синхронизации-анимации , анимация- задержка , число итераций анимации , направление анимации и состояние воспроизведения анимации .

Это свойство можно использовать для предотвращения внезапного изменения состояния при запуске или завершении анимации. Например, предположим, что анимация плавно перемещает мяч из одного положения в другое. Когда анимация останавливается, мяч сразу переходит из конечной позиции в начальную. Чтобы предотвратить это, с помощью этого свойства можно заставить мяч оставаться в конечной позиции даже после окончания анимации.

Примечание: Чтобы анимация была эффективной, необходимо определить animation-duration , потому что продолжительность анимации по умолчанию равна нулю.

Значения

нет : стиль не применяется к элементу до или после анимации. Это значение по умолчанию.

forward : Элемент сохраняет набор стилей конца анимации после ее завершения.

назад : Элемент принимает набор стилей начала анимации перед ее запуском.

оба : элемент принимает набор стилей начала анимации до начала анимации и сохраняет набор стилей конца анимации после окончания анимации.

начальный : устанавливает значение свойства по умолчанию.

наследовать : Наследует значение от родительского элемента.

Примеры

Посмотрите, как эти значения используются для стилизации элементов.

нет

В следующем примере анимация с именем «перемещение» определяется с помощью @keyframes . При применении этой анимации к div его левое поле изменяется с 0 на 100px . Продолжительность и задержка div устанавливается на 2 секунды и 3 секунды соответственно.

Исходное положение элемента div перед началом анимации — в верхнем левом углу. Как только анимация начинается, ее первый @keyframe помещает элемент на 80 пикселей ниже его начальной позиции. Когда анимация заканчивается, ее последний @keyframe помещает элемент на 80 пикселей ниже и на 100 пикселей справа от исходной позиции. После окончания анимации элемент возвращается в исходное положение. Префикс -webkit- используется для лучшей поддержки браузера.

HTML
 
CSS
 @keyframes переместить {
  0% {сверху: 80 пикселей; слева: 0;}
  100% {сверху: 80 пикселей; слева: 100px;}
}
дел {
  ширина: 100 пикселей;
  высота: 100 пикселей;
  радиус границы: 50%;
  цвет фона: #007399;
  положение: родственник;
  -webkit-имя-анимации: двигаться;
  имя-анимации: двигаться;
  -webkit-анимация-длительность: 2 с;
  продолжительность анимации: 2 с;
  -webkit-анимация-задержка: 3 с;
  анимация-задержка: 3 с;
}
 

См. режим анимации-заполнения пера: нет авторства Aakhya Singh (@aakhya) на CodePen.

Нажмите кнопку ПОВТОРИТЬ в приведенной выше демонстрации, чтобы увидеть анимацию.

forwards

Окончательная позиция элемента после анимации становится такой же, как определено последним @keyframe анимации. Последний ключевой кадр зависит от значений свойств animation-direction и animation-iteration-count .

CSS
 -webkit-animation-fill-mode: вперед;
режим заполнения анимации: вперед;
 

См. режим анимации-заполнения пера: вперед, автор Aakhya Singh (@aakhya) на CodePen.

Нажмите кнопку ПОВТОРИТЬ в приведенной выше демонстрации, чтобы увидеть анимацию.

назад

Начальная позиция элемента перед анимацией становится такой же, как определено первым @keyframe анимации. Первый ключевой кадр зависит от значений animation-direction и animation-iteration-count свойства.

CSS
 -webkit-animation-fill-mode: назад;
режим заполнения анимации: назад;
 

См. режим анимации-заполнения пера: назад, автор Аакхья Сингх (@aakhya) на CodePen.

Нажмите кнопку ПОВТОРИТЬ в приведенной выше демонстрации, чтобы увидеть анимацию.

оба

Делает начальное положение элемента перед анимацией таким же, как определено первыми @keyframe и конечная позиция после анимации такая же, как определена последним @keyframe анимации. Первый и последний ключевые кадры зависят от значений свойств animation-direction и animation-iteration-count .

CSS
 -webkit-animation-fill-mode: оба;
режим заполнения анимации: оба;
 

См. режим анимации-заполнения пера: оба авторы Aakhya Singh (@aakhya) на CodePen.

Нажмите кнопку ПОВТОРИТЬ в приведенной выше демонстрации, чтобы увидеть анимацию.

Задание разных значений для разных анимаций

Если к элементу применяется несколько анимаций, вы можете определить разные значения animation-fill-mode для разных анимаций.

Если свойству animation-fill-mode присвоено только одно значение, то оно определяет начальное и/или конечное состояние для всех анимаций, применяемых к указанному элементу. Чтобы присвоить им разные состояния, задайте несколько значений, разделенных запятыми, для animation-fill-mode 9.0022, соответствующее соответствующим именам анимаций, разделенным запятыми, заданным свойству animation-name .

Посмотрите на этот код.

CSS
 имя-анимации: изменение формы, изменение цвета;
режим анимации-заполнения: вперед, назад;
 

В этом коде значения вперед и назад соответствуют анимациям с именами "reshape" и "colorChange" соответственно.

Добавить комментарий

Ваш адрес email не будет опубликован.