CSS-如何使移动过渡动画响应？

我制作了一个小动画，5个图像在半循环路径上移动。对于这个动作，我设置了一些位置值，用线性计时的百分比表示，效果很好。主要的问题是它根本没有响应性，对于较小的分辨率，给定的百分比显然不适合。我想让它适用于不同的屏幕尺寸。要了解这一点，请看以下代码片段：

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
.someimg{
    position:absolute;
    height: 19%;
    top:2.3%;
    left: 48%;
    transform:rotate(28deg);
    animation-name: img-animation;
    animation-duration: 0.4s;
    animation-delay:3.3s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    visibility:hidden;
}

@keyframes img-animation {
    0%   {
        visibility: visible;
        top:14%;
        left: 36.5%;    
    }

    50% {
        top:6%;
        left: 41%;
    }

    99% {
        visibility: hidden;
      }

    100% {
        top:2.3%;
        left: 48%;
        visibility: visible;
    }
}

---

我的主要问题是，是否有一些库或框架，我可以用来使它响应，而圆圈仍然可以移动？我曾考虑过Bootstrap，但由于这项运动，我认为这是不可能的。我看到的唯一机会是使用媒体查询，但我愿意接受任何可以让我的生活更轻松的好做法/建议。提前感谢：）

我无法添加注释，但我认为您可以创建多个

@关键帧。
使用它，您可以创建
媒体查询
，并根据屏幕宽度使用不同的
@关键帧

@media only screen and (min-width:568){
 .someimg{
   animation-name: img-animation2;
 }
} 

@media only screen and (min-width:768){
.someimg{
   animation-name: img-animation3;
 }
} 

@media only screen and (min-width:1024){
.someimg{
   animation-name: img-animation4;
 }

}我无法添加注释，但我认为您可以创建多个
@关键帧。
使用它，您可以创建
媒体查询
，并根据屏幕宽度使用不同的
@关键帧

@media only screen and (min-width:568){
 .someimg{
   animation-name: img-animation2;
 }
} 

@media only screen and (min-width:768){
.someimg{
   animation-name: img-animation3;
 }
} 

@media only screen and (min-width:1024){
.someimg{
   animation-name: img-animation4;
 }

}
是的，我也考虑过类似的方法，但我必须使用7-8张图像，这些图像至少有4个关键帧点，并且有3个不同的屏幕大小，96定位将不是最好的，因此我只有在必须的情况下才会使用此解决方案，谢谢你的回答，我很感激：）也许有任何图书馆能提供你想要的东西，但我不知道，所以/是的，我考虑过类似的东西，但我必须使用7-8个图像，这些图像至少有4个关键帧点，并且有3个不同的屏幕大小，96个定位将不是最好的，所以我只有在必须的情况下才会使用此解决方案，谢谢你的回答，我很感激：）也许有任何图书馆能提供你想要的东西，但我不知道，所以/你希望它在更小的屏幕上看起来像什么？我希望你最终得到这个，你能接受我的回答吗？：）你希望它在更小的屏幕上看起来像什么？我希望你最终得到这个，你能接受我的回答吗？：）