Главная/ Cправочник HTML, CSS, Javascript/ CSS расширения/ Webkit/ Properties/ CSS свойство -webkit-animation-fill-mode | назначение, допустимые значения, примеры

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

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

Имя анимации и список анимированных переходов для этого имени задается пользователем.

Допустимые значения

  • none — эффект от анимации будет наблюдаться лишь в течение времени анимации
  • forwards — эффект от анимации будет виден даже тогда, когда анимация закончилась (после завершения анимации элемент получает не начальные значения, а какие-то промедуточные из анимации)
  • backwards — начальный ключевой кадр анимации будет отображаться в течение всего времени задержки анимации (имеет смысл применять только к анимациям с ненулевой задержкой)
  • both — начальный ключевой кадр анимации будет отображаться в течение всего времени задержки анимации, а последний будет отображаться даже тогда, когда анимация закончилась (имеет смысл применять только к анимациям с ненулевой задержкой).
Значение по умолчанию none
Применимо к блочным и строчным элементам
Наследование нет
Поддерживается браузерами
  • Safari 5 и выше
  • Chrome 4 и выше

Пример

CSS

div {
width:100px;
height:50px;
position:absolute;
top:5px;
-webkit-animation-name:'slide';
-webkit-animation-duration: 10s;
-webkit-animation-fill-mode: both;
}


Заметки

Safari 4.0 и выше и Chrome 3.0 и выше поддерживают возможность определить список анимаций с помощью ключевого слова @-webkit-keyframes.

По теме

Теги: , , , ,
Показать комментарии