JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div></div>
<div></div>
<h1></h1>

CSS

body {
    margin: 0;
    animation: backk 0.2s infinite;
    height: 100vh;
    width: 100%;
}
h1 {
    animation: back 0.2s infinite;
    height: 100vh;
    width: 100%;
}
@keyframes back {
    50% {
        background: black;
    }
    100% {
        background: bl;
    }
}
div {
    width: 300px;
    height:300px;
    background: linear-gradient(red,brown);
    position: absolute;
    border-radius: 50%;
    z-index: 3;
    animation: a .01s infinite linear;
}
div:nth-child(2) {
    left: 300px;
    background: linear-gradient(red,yellow);
    animation: b linear .01s infinite;
    animation-delay: .15s;
}
@keyframes a {
    100% {
        transform: rotate(360deg) translate(0,50px);
    }
}
@keyframes b {
    100% {
        transform: rotate(360deg) translate(0,50px) skew(50deg) rotate(365deg);
    }
}
.box {
    width: 100px;
    height: 100px;
    background: yellow;
    position: absolute;
    animation: 1s infinite asd;
    /* border: 1px solid black; */
    transform-origin: top;
    box-shadow: inset 0 0 10px black;
    z-index: 3;
}
@keyframes asd {
    50% {
        transform: translate(300px,0) scale(3);
    }
    100%{
     transform: translate(0px,0) scale(1);   
    }
}

JavaScript

for ( var i = 0 ; i < 10; i ++){
	var elem = document.createElement('div');
    document.body.append(elem);
    elem.classList.add('box');
    elem.style.animationDelay = i * Math.random() + '0s';
}