Html 使用css从左到右创建动画表单的最佳方法

我想从左到右制作动画（动画从不可见区域开始，如左：-100px），也在不可见区域结束（右：-100px）。我使用的代码在不同大小的屏幕上工作，但不正确，因为使用的是%。我需要重拍，但我不知道怎么做

.ip\u第一块{
宽度：100%；
身高：100%；
}
部分{
位置：相对位置；
溢出：隐藏；
} 
.ip_欢迎_文本{
宽度：100%；
身高：70%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
}
.宇航员1{
位置：相对位置；
动画：lefttoright 10s；
动画填充模式：正向；
}
@左向右关键帧{
从{
转化：translateX（-1500%）；
}
到{
转化：translateX（2200%）；
}
}

如果设置位置的动画，例如

left

属性：

body{margin:0}
.宇航员1{
溢出：隐藏；
}
img{
位置：相对位置；
左：-70px；/*起始点；需要至少为img宽度才能隐藏它*/
动画：左向右向前10秒；
}
@左向右关键帧{
到{left:100%}/*覆盖整个父宽度*/
}

< /代码>为什么你不使用<代码> px < /代码>？因为每个浏览器都是不同的（大小、分辨率）。我想在所有分辨率上同时启动动画。%在翻译中考虑元素大小，所以与浏览器无关。我应该如何在每个浏览器的同一时间点启动动画？它在左侧前100像素开始，在右侧后100像素结束。您应该从共享HTML/CSS代码开始