Javascript-форум - Начало анимации с места предыдущей анимации

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - Начало анимации с места предыдущей анимации (https://javascript.ru/forum/xhtml-html-css/45920-nachalo-animacii-s-mesta-predydushhejj-animacii.html)

Начало анимации с места предыдущей анимации

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

FanAizu,
а самому вписать это значение?

FanAizu,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  @-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{
    0%{
      top:100px;
    }

    100%{
      top:200px;
    }
  }

  @-webkit-keyframes girls-move2{
    0%{
      top:100px;
    }

    100%{
      top:200px;
    }
  }

  @-moz-keyframes girls-move2{
    0%{
      top:100px;
    }

    100%{
      top:200px;
    }
  }

  @keyframes girls-move2{
    0%{
      top:100px;
    }

    100%{
      top:200px;
    }
  }

  #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;
  }
  </style>


</head>

<body>
  <img src="http://file.mobilmusic.ru/3f/e4/92/944517-160.jpg" alt="" id="girls">
</body>

</html>

Цитата:

Сообщение от рони (Сообщение 303459)

FanAizu,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  @-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{
    0%{
      top:100px;
    }

    100%{
      top:200px;
    }
  }

  @-webkit-keyframes girls-move2{
    0%{
      top:100px;
    }

    100%{
      top:200px;
    }
  }

  @-moz-keyframes girls-move2{
    0%{
      top:100px;
    }

    100%{
      top:200px;
    }
  }

  @keyframes girls-move2{
    0%{
      top:100px;
    }

    100%{
      top:200px;
    }
  }

  #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;
  }
  </style>


</head>

<body>
  <img src="http://file.mobilmusic.ru/3f/e4/92/944517-160.jpg" alt="" id="girls">
</body>

</html>

да, про такой вариант я знаю, спасибо. но хотелось бы не задавать во второй анимацие в 0% кадре значение top, мне нужно, чтобы значение top после первой анимации сохранялось у элемента. Можно ли этого как-то добиться?