对于CSS和HTML动画，我有以下代码：
index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Animation/LipstickAd</title>
<link rel= "stylesheet" href = "style.css"></a>
</head>
<body>
<div id="logos" class = "main1">
<img src="moveable_part.png" height="750px" class="center"></img>
</div>
<div class="main">
<img id="lipstick_ad" src="lipstick_ad.png" height="750px" class="center"></img>
</div>
</body>
</html>
style.css具有以下位置：
#logos{
position: relative;
-webkit-animation: mymove 2s infinite;
}
@-webkit-keyframes mymove {
0%{
top:80px;
opacity:0%;
/* -webkit-animation-timing-function: ease-in; */
}
50%{
opacity:100%;
top:50px;
/* -webkit-animation-timing-function: ease-out; */
}
100%{
top:80px;
}
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
.main1 {
position: fixed;
top: 80px;
right: -285px;
width: 200px;
height: 100px;
}
这在全屏模式下效果很好（我通过反复试验发现了正确的px），但是一旦我调整浏览器的大小，main1中元素的位置（口红顶部就会改变）及其看起来很糟糕。
如何防止这种情况？
谢谢！