如何创建响应式动画？

Question

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

 *{ margin: 0; padding: 0; } body{ background-color: cornflowerblue; text-align: center; overflow-x: hidden; } .showbox { float: left; margin: 4em 1em; width: 100px; height: 60px; border: 2px solid green; background-color: #fff; line-height: 60px; text-align: center; font-family: 'Lobster', cursive; } .outer{ position: relative; left: 30px; animation: example 4s infinite; } @keyframes example { 0% {left:400px; top:0px;} 50% {left:800px; top:200px;} 100% {left:400px; top:0px;} }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet"> </head> <body> <br> <br> <div class = "outer"> <div class="showbox" style="transform: translate(3em,0);">Why</div> <div class="showbox" style="transform: rotate(30deg); border-color: red;">Hello</div> <div class="showbox" style="transform: translate(-3em,1em);">There</div> </div> <script src="script.js"></script> </body> </html>

Answer 1

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

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

您可以在此处查看示例

如何创建响应式动画？

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-11-25 04:07:35

如何创建响应式动画？

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-11-25 04:07:35

解决方案1
1 已采纳 2020-11-25 04:07:35