animation-fill-mode в CSS


Про CSS

Css Animation

Свойство animation позволяет анимировать элементы страницы.

Можно управлять длительностью анимации, повторением, направлением, типом движения и шагами. Анимировать можно любые элементы, в том числе псевдо-элементы.

Обязательное условие — наличие конкретных значений. Свойства со значением auto не анимируются.

Сафари в настоящее время не поддерживает анимацию псевдоэлементов, для просмотра записи воспользуйтесь другими браузерами

Пример кода анимации:

move — имя анимации 15s — длительность infinite — бесконечное повторение linear — тип движения

@keyframes

Сама анимация задается внутри блока @keyframes . После @keyframes задается имя анимации, а потом внутри фигурных скобок — её шаги.

Шаги можно задавать через проценты или с помощью ключевых слов from и to . При этом в шагах можно менять тип анимации ( animation-timing-function ):

Animation-name

Используется для задания имени анимации.

Возможные значения: одно или несколько имен анимации. Значение по умолчанию: нет.

animation-name: move; — одна анимация. animation-name: move, sun-color; — две анимации, имена задаются через запятую.

Animation-duration

Длительностью анимации управляет свойство animation-duration .

Возможные значения: время в секундах (s) или миллисекундах (ms). В случае нескольких анимаций время для каждой из них можно задать через запятую. Исходное значение — 0s.

Animation-timing-function

Свойство определяет тип анимации.

Плавная анимация ease — скольжение (значение по умолчанию) linear — ровное движение ease-in — ускорение к концу ease-out — ускорение в начале ease-in-out — более плавное скольжение, чем ease

cubic-bezier(число,число,число,число) позволяет задавать сложный тип анимации. Значения удобно подбирать на cubic-bezier.com.

Пошаговая анимация step-start и step-end — позволяют задать пошаговую анимацию, обязательно задавать конкретные шаги. При этом с step-start изменения происходят в начале шага, а с step-end — в конце.

step-end . Если выставить step-start , счетчик будет начинаться с единиц.

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

Animation-iteration-count

Управляет повторением анимации. Значение по умолчанию: 1 (анимация проигрывается один раз).

число — сколько раз проиграть анимацию. infinite — бесконечное повторение.

Animation-direction

Отвечает за направление анимации.

normal — анимация проигрывается в обычном направлении, с начала и до конца. reverse — анимация проигрывается в обратном направлении, то есть с конца. alternate — анимация проигрывается с начала и до конца, а затем в обратном направлении. alternate-reverse — анимация проигрывается с конца до начала, а затем в обратном направлении.

Animation-play-state

Управляет остановкой и проигрыванием анимации.

Возможные значения: running — анимация проигрывается (значение по умолчанию). paused — анимация застывает на первом шаге.


Управлять шагом, где будет остановка, не получается, но можно останавливать анимацию по :hover :

Animation-delay

С помощью animation-delay можно задавать задержку анимации перед началом воспроизведения.

Возможные значения: время в секундах (s) или миллисекундах (ms). Значения могут быть отрицательными. В случае нескольких анимаций время для каждой из них можно задать через запятую. Исходное значение — 0s.

Animation-fill-mode

Свойство определяет будет ли анимация воздействовать на элемент вне времени воспроизведения анимации.

none — анимация воздействует на элемент только во время воспроизведения, по окончании элемент возвращается в исходное состояние. forwards — анимация воздействует на элемент по окончании воспроизведения. backwards — анимация воздействует на элемент до начала воспроизведения. both — анимация воздействует на элемент и до начала, и после окончания воспроизведения.

Чтобы увидеть как backwards и both работают до начала воспроизведения анимации, задана задержка animation-delay: 3s; . Так же для этого имеет смысл открыть пример в новом окне.

Все эти свойства можно записать с помощью короткой записи, например:

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

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

animation-fill-mode

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

Основные сведения

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

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

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

Илон Маск рекомендует:  Печать и отчеты

К примеру, если вы делаете выезжающее из-за края окна браузера сообщение, то после окончания анимации сообщение вернётся обратно за край экрана. Значение forwards свойства animation-fill-mode изменяет это поведение и оставляет стили на момент завершения движения. Таким образом, сообщение плавно выдвинется из-за края окна и останется на месте.

CSS синтаксис

Возможные значения

Значение Описание
none Значение по умолчанию. К элементу не применяются какие-либо стили.
forwards Как только анимация будет завершена, значения, определённые в последнем ключевом кадре, сохранятся до тех пор, пока стиль анимации не будет удалён из любого селектора, нацеленного на данный узел.
backwards К элементу применяется стиль первого ключевого кадра, и он остаётся на протяжении периода заданного animation-delay.
both К элементу применяются оба правила, как для forwards, так и для backwards.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

Пример

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


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

Пример

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

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

CSS animations do not affect the element before the first keyframe is played or after the last keyframe is played. The animation-fill-mode property can override this behavior.

Значение по умолчанию: none
Унаследованный: no
Анимируемый: no. Прочитать о Анимируемый
Версия: CSS3
JavaScript синтаксис: object.style.animationFillMode=»forwards» Попробовать

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

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

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

CSS-анимации: Transitions и Animations. Motion Path Module CSS

До появления CSS3 при слове «анимация» верстальщиков бросало в холодный пот. А всё потому, что в те времена сделать качественную и красивую анимацию было не тривиальной задачей. CSS этого делать не умел, поэтому все анимации делались на JavaScript. Нужно было перелопатить кучу форумов, найти таких же товарищей по несчастью, потратить уйму времени на разработку, а в итоге услышать от дизайнера: «Ладно, сойдет и так». И когда наконец вышел CSS3, фейерверки не прекращались до утра, а шампанское лилось рекой. Это был знаменательный день для всех web-разработчиков (следующий такой день был, когда Microsoft объявила о прекращении поддержки Internet Explorer). С приходом CSS3 многие ранее сложные задачи превратились в простые и приятные для работы. Это же касается анимаций в CSS, о которых я расскажу в данной статье.

CSS transitions

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

При наведении курсора на квадрат плавно изменяется цвет фона.

Теперь подробнее рассмотрим, как управлять переходами в CSS. У нас на вооружении есть всего 5 свойств, которые позволяют контролировать transition-анимацию:

  • transition-property;
  • transition-duration;
  • transition-timing-function;
  • transition-delay;
  • transition;

transition-property — указывает список свойств, которые будут анимироваться; свойства, которые здесь не указаны, будут изменяться обычным образом. Можно анимировать все свойства для конкретного элемента, указав значение all. Если вы не указали ни одного свойства, то по умолчанию используется значение all.

transition-duration — задаёт значение продолжительности анимации, время можно указывать в секундах или миллисекундах.

transition-timing-function — временная функция, указывает точки ускорения и замедления за определенный период времени для контроля изменения скорости анимации. Проще говоря, с помощью этого свойства можно указать поведение для анимации. Например, мы можем ускорить анимацию в начале и замедлить в конце, либо наоборот. Для того, чтобы задать процесс анимации используются кривые Безье. Вообще, transition-timing-function позволяет сделать очень много разных поведений для анимаций, это целая тема для статьи, поэтому здесь мы не будем углубляться.

transition-delay — задаёт задержку времени до начала анимации, можно указывать в секундах или миллисекундах.

transition — это общее свойство, которое позволяет перечислить первые четыре свойства в порядке: property, duration, timing-function, delay.

У нас получилась вот такая простая анимация: при наведении мышкой на квадрат изменяется ширина; продолжительность анимации одна секунда; анимация воспроизводится по линейной функции; задержка перед началом анимации 500 миллисекунд.

С помощью CSS transitions можно анимировать почти все свойства и создавать много интересных, красивых, функциональных и даже сложных анимаций, которые будут дополнять и улучшать ваш проект. Например, я сделал вот такой Material-FAB на чистом CSS, используя transitions:

CSS animations

CSS animations позволяют делать более сложные анимации, нежели CSS transitions. Весь секрет в @keyframes. Правило @keyframes позволяет создавать анимацию с помощью набора ключевых кадров, то есть описывает состояние объекта в определенный момент времени. Давайте рассмотрим простой пример.

Наш круг ожил и он как будто пульсирует.

Есть 9 свойств, которые позволяют контролировать CSS animations:

  • animation-name;
  • animation-duration;
  • animation-timing-function;
  • animation-delay;
  • animation-iteration-count;
  • animation-direction;
  • animation-play-state;
  • animation-fill-mode;
  • animation;

animation-name — здесь указвается имя анимации, которое связывает правило @keyframes с селектором.

animation-iteration-count — задаёт количество повторов анимации, значение по умолчанию 1. Значение infinite означает, что анимация будет проигрываться бесконечно.

animation-direction — задаёт направление анимации.


animation-play-state — данное свойство управляет остановкой и прогрыванием анимации. Есть два значения, running (анимация проигрывается, по умолчанию) и paused (останавливает анимацию).

animation-fill-mode — устанавливает, какие CSS-свойства будут приминены к объекту до или после анимации. Может принимать такие значения:

  • none — анимируемые CSS-свойства применятся к объекту только во время воспроизведения анимации, по окончании объект возвращается в исходное состояние;
  • forwards — анимируемые CSS-свойства применятся к объекту по окончании воспроизведения анимации;
  • backwards — анимируемые CSS-свойства применятся к объекту до начала воспроизведения анимации;
  • both — анимируемые CSS-свойства применятся к объекту и до начала, и после окончания воспроизведения анимации;

Свойства animation-duration, animation-timing-function, animation-delay работают так же, как аналогичные свойства в CSS transitions, о которых я писал раньше, поэтому не буду повторяться.

С помощью animations CSS можно создавать довольно сложные анимации без использования JavaScript. Яркий пример — это лоадеры, то есть элементы, которые показывают, что на вашей страничке что-то загружается. Вот несколько примеров:

Motion Path Module

Motion Path Module CSS позволяет создавать движение объектов по контуру через специальное свойство motion-path. Раньше такую анимацию можно было сделать только с помощью SVG или сложных скриптов.

В этой спецификаии есть 3 свойства:

motion-path — это свойство позволяет указать точки(координаты) по которым будет двигаться объект. Синтаксис такой же как у SVG-атрибута path.

motion-offset — это свойство приводит объект в движение от начальной точки до конечной. Оно принимает либо двойное значение длины, либо проценты. Чтобы объект начал двигаться, нужно определить анимацию, которая будет идти от 0 до 100%.

motion-rotation — это свойство позволяет указать, какой стороной вперед будет двигаться объект. Можно указать auto, reverse или свое значение в градусах (‘-45deg’, ’30deg’ и т.д).

К сожалению, motion-path пока что поддержывается только в Chrome и Opera, но будем надеяться, что остальные браузеры в скором времени возьмут с них пример, ведь штука действительно полезная.

Для тех, кто ещё не понял, как это работает, или хочет лучше с этим разобраться, я сделал пример (ссылка на codeopen).

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

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

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

  • forwards — по окончанию анимации элемент сохраняет стиль последнего ключевого кадра.
  • none — значение по умолчанию. Элемент возвращается к исходному стилю.

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

Стоит отметить, что на внешний вид последнего ключевого кадра влияют значения свойств animation-iteration-count и animation-direction . К примеру, если наряду с animation-fill-mode вы задали стиль animation-direction: reverse , то после завершения анимации элемент останется с тем стилем, который определен для первого, а не последнего ключевого кадра.

CSS animation-fill-mode

The CSS animation-fill-mode property allows you to define what values are applied by the animation outside the time it is executing. This can be before the animation has been applied, or after it has finished running.

Syntax

Possible Values

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial Represents the value specified as the property’s initial value. inherit Represents the computed value of the property on the element’s parent. unset This value acts as either inherit or initial , depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

Basic Property Information

Example Code

Basic CSS

Working Example within an HTML Document

CSS Specifications

  • This property is defined in CSS Animations Level 1 (Editor’s Draft)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.

Vendor Prefixes

For maximum browser compatibility many web developers add browser-specific properties by using extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -ms- for Internet Explorer, -moz- for Firefox, -o- for older versions of Opera etc. As with any CSS property, if a browser doesn’t support a proprietary extension, it will simply ignore it.

This practice is not recommended by the W3C, however in many cases, the only way you can test a property is to include the CSS extension that is compatible with your browser.

The major browser manufacturers generally strive to adhere to the W3C specifications, and when they support a non-prefixed property, they typically remove the prefixed version. Also, W3C advises vendors to remove their prefixes for properties that reach Candidate Recommendation status.

Many developers use Autoprefixer, which is a postprocessor for CSS. Autoprefixer automatically adds vendor prefixes to your CSS so that you don’t need to. It also removes old, unnecessary prefixes from your CSS.

You can also use Autoprefixer with preprocessors such as Less and Sass.

Понимание свойства animation-fill-mode в CSS анимации

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

Как показывает практика, animation-fill-mode это одно из самых неоднозначных свойств, которые используются в анимации. Например, никто не путается в таких свойствах, как animation-name, animation-duration. Но какие функции выполняет animation-fill-mode? Давайте рассмотрим несколько примеров:

И, конечно, это может быть расширено до:

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

Определение animation-fill-mode

Animation-fill-mode определяет, будет ли виден результат анимации после окончания времени ее выполнения. То есть с помощью этого свойства вы определяете, как будет выглядеть элемент после того, как анимация прекратится. После того, как мы определились с предназначением этого свойства, давайте подробнее разберемся с его использованием.
Animation-fill-mode может принимать одно из четырех значений: none, forwards, backwards, orboth.

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

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

Forwards:

Давайте изменим значение на forwards: демка.

Используя это значение, мы сообщаем браузеру, что мы хотим, чтобы объект сохранял конечную форму.

Backwards:

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

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

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

Технически, каждая анимация использует задержку, но со значением 0с, поэтому использование backwards без дополнительного указания задержки бессмысленно. Также его использование не принесет результата, если начальное состояние объекта и свойства ключевого кадра имеют одинаковое значение. То есть, если в указанной выше демке заменить значение Backwards на None, мяч останется красным, пока не начнется анимация.

На самом деле, довольно сложно сходу придумать значительное количество сценариев, в которых имеет смысл использовать это значение.

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

Некоторые замечания и советы:

Вот несколько правил, которые стоит использовать помимо тех, которые указаны в спецификации:

  • Хотя значение backwards имеет сомнительную практическую ценность, его стоит использовать при создании сложных анимаций, для которых используются скрипты или данные, указанные пользователем.
    • Значения backwards и forwards меняются местами, если свойство animation-direction имеет значение reverse.
    • Помните о том, что кроме специальных значений animation-fill-mode существует ряд общих значений, которые вы также можете использовать.
    • Используя animation-fill-mode, не присваивайте анимации имена, которые совпадают с возможными значениями этого свойства. Иначе указанное имя будет восприниматься, как значение animation-fill-mode.

Вывод

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

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

Илон Маск рекомендует:  Атрибут async в HTML
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL