Главная » Анимация css » animation-fill-mode - До и после анимации
198 0  

animation-fill-mode - До и после анимации

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

Синтаксис написания:

/* Single animation */
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;

/* Multiple animations */
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;


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


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

 


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


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


Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2020