У меня задача анимации такова:ракета должна перемещатся в каждую милисекунду в пределах случайного количества px по top и left
html(ничего особенного только изображение)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script type="module" src="index.js"></script>
</head>
<body>
<img src="https://icons.iconarchive.com/icons/bokehlicia/captiva/256/rocket-icon.png" class="favicon" alt="">
</body>
</html>
CSS(почему-то не хочет меняться через js переменная --main-up)
:root{
--main-up:20px
}
.favicon{
width: 50px;
height: 50px;
position: relative;
top: 200px;
right: -200px;
}
@keyframes animation{
0%{
top:var(--main-up);
left: var(--main-up);
}
20%{
top: var(--main-up);
}
}
.favicon:hover{
animation: animation infinite ease alternate infinite;
}
Js:
// Получаем случайное число
let random=Math.floor(Math.random()*5)
// Изображение
let r=document.querySelector('.favicon')
// Задаем для перемененной css значение
r.style.setProperty("--main-up",random+'px')
Простой
