[FanAizu]

Использую 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, полученное после окончания первой анимации?