Making a div move randomly around using CSS

Issue

I'm trying to use CSS to make a red div move around randomly (by assigning random coordinates through a variable called rando).

CSS

<style> 

div {
  width: 50px;
  height: 50px;
  background-color: red;
  position: relative;
  animation-name: box;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

@keyframes box {
  0%   {background-color:red; left: rando px; top: rando px;}
  25%  {background-color:red; left: rando px; top: rando px;}
  50%  {background-color:red; left: rando px; top: rando px;}
  75%  {background-color:red; left: rando px; top: rando px;}
  100% {background-color:red; left: rando px; top: rando px;}
}

HTML

<div></div>

I also tried to do something similar but with a JS function which contained the random numbers (below is a separate example):

CSS

<style> 
//variable is assigned here
:root {
  --rando: Math.floor((Math.random() * 20) + 1);
}
div {
  width: 50px;
  height: 50px;
  background-color: red;
  position: relative;
  animation-name: box;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

@keyframes box {
  0%   {background-color:red; left: rando px; top: rando px;}
  25%  {background-color:red; left: rando px; top: rando px;}
  50%  {background-color:red; left: rando px; top: rando px;}
  75%  {background-color:red; left: rando px; top: rando px;}
  100% {background-color:red; left: rando px; top: rando px;}
}

HTML

<div></div>

JS

<script>
var rando = Math.floor((Math.random() * 20) + 1);
</script>

So far none of these examples are working (the red box does not move). I'm still new to using variables in CSS so any help or any information would be appreciated.

Thanks

Solution

You can query the root with your JavaScript and adjust the values then. You can't intermix CSS and JS.
Besides that, you need a better understanding of CSS variables. To use them you must put it inside the var function, as shown in the code.

const root = document.querySelector(":root"); // we first get the root element
root.style.setProperty("--rando", `${Math.floor(Math.random() * 20) + 1}px`); // inject the CSS with JavaScript

div {
  width: 50px;
  height: 50px;
  background-color: red;
  position: relative;
  animation-name: box;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

@keyframes box {
  0%   {background-color:red; left: var(--rando); top: var(--rando);}
  25%  {background-color:red; left: var(--rando); top: var(--rando);}
  50%  {background-color:red; left: var(--rando); top: var(--rando);}
  75%  {background-color:red; left: var(--rando); top: var(--rando);}
  100% {background-color:red; left: var(--rando); top: var(--rando);}
}

<div></div>

Obviously this animation does absolutely nothing because you're not making the element move or change in any way, but I hope you get the point. (If you run the example few times you will realize the change of position in the red box.)

To answer the "move around randomly" part of the question, you can create multiple "rando" variables and use them:

const root = document.querySelector(":root"); // we first get the root element
for(let i = 0; i < 10; i++) {
  root.style.setProperty(`--rando${i}`, `${Math.floor(Math.random() * 200) + 1}px`);
}

div {
  width: 50px;
  height: 50px;
  background-color: red;
  position: relative;
  animation-name: box;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

@keyframes box {
  0%   {background-color:red; left: var(--rando0); top: var(--rando1);}
  25%  {background-color:red; left: var(--rando2); top: var(--rando3);}
  50%  {background-color:red; left: var(--rando4); top: var(--rando5);}
  75%  {background-color:red; left: var(--rando6); top: var(--rando7);}
  100% {background-color:red; left: var(--rando8); top: var(--rando9);}
}

<div></div>

(I've changed 20px to 200px so you can actually see the animation difference.)

For better luck on your CSS variable venture next time I highly suggest reading the docs and how to change them with JavaScript.

Answered By - code