如何构建响应式 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.