html - 将 2 个图像平行移动到页面角落

Question

我有 2 张这样的图片：

<div id="logos_Body">
  <div id="logo1_Body">
    <img src='image1.png' id="logo1" width="334.2" height="369.2">
  </div>
  <div id="logo2_Body">
    <img src="image2.png" id="logo2" width="180" height="70">
  </div>
</div>

CSS：

#logos_Body{
animation:LogosMove 5s;
}
@-webkit-keyframes LogoMove {
  100% { top:-80px; left:-150px; width:170px; height:140px;}  
}

#logo1{
animation:Logo1Move 5s;
}
@-webkit-keyframes Logo1Move {
 100% {  width:90px; height: 110px;}  
 }

#logo2{
animation:logo2Move 5s;
}
@-webkit-keyframes logo2Move {
  100% { width:75px; height: 30px;}  
}

这些图像最初必须出现在页面中间，并显示宽度和高度。我想将它们移动到页面的右上角，并减少它们的宽度和高度。我使用animation了如上所示的属性，问题是第一个图像向右移动没有问题（移动和调整大小），但第二个图像向右缩小但没有正确移动到角落。

我认为问题与image1身高有关，但我不确定，我不知道如何解决这个问题，谢谢。

1-初始外观。2-我需要他们那样。3-上面的代码给了我什么。