Блог

Главная - Вопросы по программированию - Как я могу создать адаптивную анимацию?

Как я могу создать адаптивную анимацию?

#javascript #html #css

#javascript #HTML #css

Вопрос:

По сути, я пытаюсь показать режим заливки анимации, который имеет эффекты. У меня есть анимация, которую я хочу, но по какой-то причине она не реагирует. Я попытался добавить медиа-запросы к ключевым кадрам, но когда я это сделал, анимация перестала работать. Как я могу исправить это, чтобы моя анимация переходила на позицию независимо от размера окна, даже когда оно уменьшается? Буду признателен за любую помощь. Спасибо. Вот мой код.

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

Итак, когда вы делаете медиа-запросы, вы ограничиваете ширину представления. Так что последний div с переводом X в 1320 пикселей не будет работать. Я бы рекомендовал использовать vw, поэтому вместо этого попробуйте

преобразование: translateX (70vw);

Экспериментируйте с количеством vw, пока не будете удовлетворены.

Метки: