javascript - 如何构建响应式动画？

问题描述

基本上，我正在尝试展示具有效果的动画填充模式。我有我想要的动画，但由于某种原因，它没有响应。我尝试将媒体查询添加到关键帧，但是当我这样做时，动画将停止工作。我该如何解决这个问题，以便我的动画无论某人的窗口大小如何都可以到达一个位置，即使它缩小了？任何帮助，将不胜感激。谢谢。这是我的代码。

* {
    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>

标签： javascripthtmlcss

javascript - 如何构建响应式动画？

问题描述

解决方案

推荐阅读