Javascript 如何创建响应性强的动画？

基本上，我正在尝试设置一个包含3个框的变换的动画。我有我想要的动画，但由于某些原因，它没有响应。我尝试将媒体查询添加到关键帧，但当我添加到关键帧时，动画将停止工作。我如何解决这个问题，使我的动画即使在缩小时也能保持在一个位置，而不管某人的窗口大小如何？任何帮助都将不胜感激。谢谢这是我的密码

*{
保证金：0；
填充：0；
}
身体{
背景颜色：矢车菊蓝；
文本对齐：居中；
溢出x：隐藏；
}
.陈列柜{
浮动：左；
保证金：4em 1em；
宽度：100px；
高度：60px；
边框：2倍纯绿；
背景色：#fff；
线高：60px；
文本对齐：居中；
字体系列：“龙虾”，草书；
}
.外部{
位置：相对位置；
左：30px；
动画：示例4s无限；
} 
@关键帧示例{
0%{左：400px；顶：0px；}
50%{左：800px；顶：200px；}
100%{左：400px；顶：0px；}
}

答复




为什么？
你好
那里

您可以为媒体查询设置不同的关键帧，而不是向关键帧添加媒体查询

@media (max-width: 600px) {
  .outer{
     width: 100%;
     position: relative;
     left: 30px;
     animation: sm-example 4s infinite;
  }
}

@keyframes sm-example {
  0%   {left:10%; top:0px;}
  50%  {left:20%; top:200px;}
  100% {left:10%; top:0px;}
}

你们可以看到样品