Почему моя анимация не работает?

Question

У меня задача анимации такова:ракета должна перемещатся в каждую милисекунду в пределах случайного количества 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"  id="icon" alt="">
</body>
</html>

CSS(почему-то не хочет меняться через js переменная --main-up)

/* Получаем переменную */
:root {
  --animation-time: 200px; 
}

/* стили для html,body */
html, body {
  height: 100%;
}

/* стили для body */
body {
  display: flex;
  position: relative;
  padding: 0;
  background-color: #222;
  justify-content: center;
  align-items: center;
}

/* Анимация */
@keyframes flicker {
  0% {
    top: var(--animation-time);
  } 100% {
   top: var(--animation-time);
  }
}

/* Параметры изображения */
#icon {
    position: relative;
  animation: flicker infinite ease 
}

JAVASCRIPT:

// Получаем случайное значение
const time = Math.floor(Math.random*50)

console.log(time);
// Изображение
const incon = document.querySelector('#icon');

// Задаем значение
incon.style.setProperty('--animation-time', time +'s');

БЛОГ НА HUSL

Почему моя анимация не работает?

Ответы (0 шт):