Показать сообщение отдельно
  #1 (permalink)  
Старый 20.03.2014, 18:54
Кандидат Javascript-наук
Отправить личное сообщение для FanAizu Посмотреть профиль Найти все сообщения от FanAizu
 
Регистрация: 08.03.2011
Сообщений: 148

Начало анимации с места предыдущей анимации
Использую css анимацию, а именно свойство animation. В нем указаны две анимации.
<style>
			#girls
			{
				position:relative;
				top:0;
				left:0;
				-webkit-animation:girls-move1 2s 0s forwards linear, girls-move2 2s 4s forwards linear;
				-o-animation:girls-move1 2s 0s forwards linear, girls-move2 2s 4s forwards linear;
				-moz-animation:girls-move1 2s 0s forwards linear, girls-move2 2s 4s forwards linear;
				animation:girls-move1 2s 0s forwards linear, girls-move2 2s 4s forwards linear;
			}
			
			@-o-keyframes girls-move1
			{
				100% 
				{
					top:100px;
				}
			}
			@-webkit-keyframes girls-move1
			{
				100% 
				{
					top:100px;
				}
			}
			@-moz-keyframes girls-move1
			{
				100% 
				{
					top:100px;
				}
			}
			@keyframes girls-move1
			{
				100% 
				{
					top:100px;
				}
			}
			
			
			
			@-o-keyframes girls-move2
			{
				100% 
				{
					top:200px;
				}
			}
			@-webkit-keyframes girls-move2
			{
				100% 
				{
					top:200px;
				}
			}
			@-moz-keyframes girls-move2
			{
				100% 
				{
					top:200px;
				}
			}
			@keyframes girls-move2
			{
				100% 
				{
					top:200px;
				}
			}
		</style>

Обе анимации работают со свойством top. Проблема возникает, когда заканчивается первая анимация и начинается вторая. Поидее после окончания первой анимации значение свойства top должно быть 100px и вторая анимация должна делать переход от 100px к 200px, но на практике во время начала второй анимации происходит скачок к top:0px и от этого значения происходит переход к 200px. Почему так происходит и как заставить браузер использовать значение top, полученное после окончания первой анимации?
Ответить с цитированием