如何創建響應式動畫？

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