如何構建響應式 animation？
[英]How can I construct a responsive animation?
問題描述
基本上，我試圖展示一個有效果的 animation 填充模式。 我有我想要的 animation，但由於某種原因，它沒有響應。 我嘗試將媒體查詢添加到關鍵幀，但是當我這樣做時，animation 將停止工作。 我該如何解決這個問題，以便我的 animation 變為 position，無論某人的 window 尺寸如何，即使它縮小了？ 任何幫助，將不勝感激。 謝謝。 這是我的代碼。
* { margin: 0; padding: 0; } body { overflow: hidden; }.box { width: 100px; height: 100px; margin: 10px; display: flex; justify-content: center; align-items: center; background-color: #f6f6f6; }.animate { animation-name: move; animation-duration: 3s; animation-timing-function: ease; animation-delay: 1s; }.none { animation-fill-mode: none; }.forwards { animation-fill-mode: forwards; }.backwards { animation-fill-mode: backwards; }.both { animation-fill-mode: both; } @keyframes move { from { transform: translateX(0); } to { transform: translateX(1320px); background-color: lightpink; color: black; } }
<.DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width" name="viewport"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div class="section" id="section4"> <div class="text-wr"> <div class="playground"> <div class="box animate none"> None </div> <div class="box animate forwards"> Forwards </div> <div class="box animate backwards"> Backwards </div> <div class="box animate both"> Both </div> </div> </div> </div> <script src="script.js"> </script> </body> </html>
1 個解決方案
解決方案1
0 2020-11-27 16:37:15
好的，所以當您進行媒體查詢時，您正在限制視圖寬度。 所以最后一個將 X 轉換為 1320 px 的 div 將不起作用。 我建議使用 vw 所以改為嘗試
變換：translateX（70vw）；
嘗試大眾數量，直到您滿意為止。
如何創建響應式動畫？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.