CSS :: Свойство animation-fill-mode
http://belarusweb.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, то их действия будут отменены.

Ссылки

Примеры

HTML Результат BwCodes
<!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