#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, пока не будете удовлетворены.