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

Question

我做了一个小动画，5 个图像在半循环路径上移动。对于这个动作，我用线性时间设置了一些位置值的百分比，它工作正常。主要问题是它根本没有响应，对于较小的分辨率，显然给定的百分比不适合。我想让它适用于不同的屏幕尺寸。要知道这是代码的一点点sn-p：

*{
    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，但由于运动，我认为这是不可能的。我看到使用媒体查询的唯一机会，但我愿意接受任何可以让我的生活更轻松的良好做法/建议。在此先感谢:)

Answer 1

我无法添加 cmets，但我认为您可以创建多个 @keyframes。 有了它，您可以创建Media Queries 并根据屏幕宽度使用不同的@keyframes

@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;
 }

}