Balls Vortex animation in HTML and CSS

August 16, 2023

Balls Vortex animation in HTML and CSS

 <!DOCtype html>

<html>
<style>
body {
    font-size: 100px;
    overflow: hidden;
    perspective: 3000px;
}

.vortex {
    position: relative;
    transform: rotateX(60deg);
    transform-style: preserve-3d;
}

.ball {
    position: absolute;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    transform-origin: bottom;
    transform-style: preserve-3d;
    background-image: radial-gradient(circle at top, hsl(var(--hue, 0), 100%, 75%), hsl(var(--hue, 0), 100%, 0%));
    -webkit-animation: dot 60s var(--delay) infinite;
    animation: dot 60s var(--delay) infinite;
}

@-webkit-keyframes dot {
    0% {
      transform: translate(-50%, -50%) rotateZ(var(--angle)) translateX(10em) rotateZ(calc(var(--angle) * -1)) rotateX(-60deg) scale(0);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
    80% {
      transform: translate(-50%, -50%) rotateZ(var(--angle)) translateX(2em) rotateZ(calc(var(--angle) * -1)) rotateX(-60deg) scale(1);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
    100% {
      transform: translate(-50%, -50%) rotateZ(var(--angle)) translateX(0em) rotateZ(calc(var(--angle) * -1)) rotateX(-60deg) scale(0);
    }
}

@keyframes dot {
    0% {
      transform: translate(-50%, -50%) rotateZ(var(--angle)) translateX(10em) rotateZ(calc(var(--angle) * -1)) rotateX(-60deg) scale(0);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
    80% {
      transform: translate(-50%, -50%) rotateZ(var(--angle)) translateX(2em) rotateZ(calc(var(--angle) * -1)) rotateX(-60deg) scale(1);
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
    }
    100% {
      transform: translate(-50%, -50%) rotateZ(var(--angle)) translateX(0em) rotateZ(calc(var(--angle) * -1)) rotateX(-60deg) scale(0);
    }
}

.ball:nth-child(1) {
    --delay: 0s;
    --angle: 0deg;
    --hue: 0;
}

.ball:nth-child(2) {
    --delay: -0.234375s;
    --angle: -84.375deg;
    --hue: -1.40625;
}

.ball:nth-child(3) {
    --delay: -0.46875s;
    --angle: -168.75deg;
    --hue: -2.8125;
}

.ball:nth-child(4) {
    --delay: -0.703125s;
    --angle: -253.125deg;
    --hue: -4.21875;
}

.ball:nth-child(5) {
    --delay: -0.9375s;
    --angle: -337.5deg;
    --hue: -5.625;
}

.ball:nth-child(6) {
    --delay: -1.171875s;
    --angle: -421.875deg;
    --hue: -7.03125;
}

.ball:nth-child(7) {
    --delay: -1.40625s;
    --angle: -506.25deg;
    --hue: -8.4375;
}

.ball:nth-child(8) {
    --delay: -1.640625s;
    --angle: -590.625deg;
    --hue: -9.84375;
}

.ball:nth-child(9) {
    --delay: -1.875s;
    --angle: -675deg;
    --hue: -11.25;
}

.ball:nth-child(10) {
    --delay: -2.109375s;
    --angle: -759.375deg;
    --hue: -12.65625;
}

.ball:nth-child(11) {
    --delay: -2.34375s;
    --angle: -843.75deg;
    --hue: -14.0625;
}

.ball:nth-child(12) {
    --delay: -2.578125s;
    --angle: -928.125deg;
    --hue: -15.46875;
}

.ball:nth-child(13) {
    --delay: -2.8125s;
    --angle: -1012.5deg;
    --hue: -16.875;
}

.ball:nth-child(14) {
    --delay: -3.046875s;
    --angle: -1096.875deg;
    --hue: -18.28125;
}

.ball:nth-child(15) {
    --delay: -3.28125s;
    --angle: -1181.25deg;
    --hue: -19.6875;
}

.ball:nth-child(16) {
    --delay: -3.515625s;
    --angle: -1265.625deg;
    --hue: -21.09375;
}

.ball:nth-child(17) {
    --delay: -3.75s;
    --angle: -1350deg;
    --hue: -22.5;
}

.ball:nth-child(18) {
    --delay: -3.984375s;
    --angle: -1434.375deg;
    --hue: -23.90625;
}

.ball:nth-child(19) {
    --delay: -4.21875s;
    --angle: -1518.75deg;
    --hue: -25.3125;
}

.ball:nth-child(20) {
    --delay: -4.453125s;
    --angle: -1603.125deg;
    --hue: -26.71875;
}

.ball:nth-child(21) {
    --delay: -4.6875s;
    --angle: -1687.5deg;
    --hue: -28.125;
}

.ball:nth-child(22) {
    --delay: -4.921875s;
    --angle: -1771.875deg;
    --hue: -29.53125;
}

.ball:nth-child(23) {
    --delay: -5.15625s;
    --angle: -1856.25deg;
    --hue: -30.9375;
}

.ball:nth-child(24) {
    --delay: -5.390625s;
    --angle: -1940.625deg;
    --hue: -32.34375;
}

.ball:nth-child(25) {
    --delay: -5.625s;
    --angle: -2025deg;
    --hue: -33.75;
}

.ball:nth-child(26) {
    --delay: -5.859375s;
    --angle: -2109.375deg;
    --hue: -35.15625;
}

.ball:nth-child(27) {
    --delay: -6.09375s;
    --angle: -2193.75deg;
    --hue: -36.5625;
}

.ball:nth-child(28) {
    --delay: -6.328125s;
    --angle: -2278.125deg;
    --hue: -37.96875;
}

.ball:nth-child(29) {
    --delay: -6.5625s;
    --angle: -2362.5deg;
    --hue: -39.375;
}

.ball:nth-child(30) {
    --delay: -6.796875s;
    --angle: -2446.875deg;
    --hue: -40.78125;
}

.ball:nth-child(31) {
    --delay: -7.03125s;
    --angle: -2531.25deg;
    --hue: -42.1875;
}

.ball:nth-child(32) {
    --delay: -7.265625s;
    --angle: -2615.625deg;
    --hue: -43.59375;
}

.ball:nth-child(33) {
    --delay: -7.5s;
    --angle: -2700deg;
    --hue: -45;
}

.ball:nth-child(34) {
    --delay: -7.734375s;
    --angle: -2784.375deg;
    --hue: -46.40625;
}

.ball:nth-child(35) {
    --delay: -7.96875s;
    --angle: -2868.75deg;
    --hue: -47.8125;
}

.ball:nth-child(36) {
    --delay: -8.203125s;
    --angle: -2953.125deg;
    --hue: -49.21875;
}

.ball:nth-child(37) {
    --delay: -8.4375s;
    --angle: -3037.5deg;
    --hue: -50.625;
}

.ball:nth-child(38) {
    --delay: -8.671875s;
    --angle: -3121.875deg;
    --hue: -52.03125;
}

.ball:nth-child(39) {
    --delay: -8.90625s;
    --angle: -3206.25deg;
    --hue: -53.4375;
}

.ball:nth-child(40) {
    --delay: -9.140625s;
    --angle: -3290.625deg;
    --hue: -54.84375;
}

.ball:nth-child(41) {
    --delay: -9.375s;
    --angle: -3375deg;
    --hue: -56.25;
}

.ball:nth-child(42) {
    --delay: -9.609375s;
    --angle: -3459.375deg;
    --hue: -57.65625;
}

.ball:nth-child(43) {
    --delay: -9.84375s;
    --angle: -3543.75deg;
    --hue: -59.0625;
}

.ball:nth-child(44) {
    --delay: -10.078125s;
    --angle: -3628.125deg;
    --hue: -60.46875;
}

.ball:nth-child(45) {
    --delay: -10.3125s;
    --angle: -3712.5deg;
    --hue: -61.875;
}

.ball:nth-child(46) {
    --delay: -10.546875s;
    --angle: -3796.875deg;
    --hue: -63.28125;
}

.ball:nth-child(47) {
    --delay: -10.78125s;
    --angle: -3881.25deg;
    --hue: -64.6875;
}

.ball:nth-child(48) {
    --delay: -11.015625s;
    --angle: -3965.625deg;
    --hue: -66.09375;
}

.ball:nth-child(49) {
    --delay: -11.25s;
    --angle: -4050deg;
    --hue: -67.5;
}

.ball:nth-child(50) {
    --delay: -11.484375s;
    --angle: -4134.375deg;
    --hue: -68.90625;
}

.ball:nth-child(51) {
    --delay: -11.71875s;
    --angle: -4218.75deg;
    --hue: -70.3125;
}

.ball:nth-child(52) {
    --delay: -11.953125s;
    --angle: -4303.125deg;
    --hue: -71.71875;
}

.ball:nth-child(53) {
    --delay: -12.1875s;
    --angle: -4387.5deg;
    --hue: -73.125;
}

.ball:nth-child(54) {
    --delay: -12.421875s;
    --angle: -4471.875deg;
    --hue: -74.53125;
}

.ball:nth-child(55) {
    --delay: -12.65625s;
    --angle: -4556.25deg;
    --hue: -75.9375;
}

.ball:nth-child(56) {
    --delay: -12.890625s;
    --angle: -4640.625deg;
    --hue: -77.34375;
}

.ball:nth-child(57) {
    --delay: -13.125s;
    --angle: -4725deg;
    --hue: -78.75;
}

.ball:nth-child(58) {
    --delay: -13.359375s;
    --angle: -4809.375deg;
    --hue: -80.15625;
}

.ball:nth-child(59) {
    --delay: -13.59375s;
    --angle: -4893.75deg;
    --hue: -81.5625;
}

.ball:nth-child(60) {
    --delay: -13.828125s;
    --angle: -4978.125deg;
    --hue: -82.96875;
}

.ball:nth-child(61) {
    --delay: -14.0625s;
    --angle: -5062.5deg;
    --hue: -84.375;
}

.ball:nth-child(62) {
    --delay: -14.296875s;
    --angle: -5146.875deg;
    --hue: -85.78125;
}

.ball:nth-child(63) {
    --delay: -14.53125s;
    --angle: -5231.25deg;
    --hue: -87.1875;
}

.ball:nth-child(64) {
    --delay: -14.765625s;
    --angle: -5315.625deg;
    --hue: -88.59375;
}

.ball:nth-child(65) {
    --delay: -15s;
    --angle: -5400deg;
    --hue: -90;
}

.ball:nth-child(66) {
    --delay: -15.234375s;
    --angle: -5484.375deg;
    --hue: -91.40625;
}

.ball:nth-child(67) {
    --delay: -15.46875s;
    --angle: -5568.75deg;
    --hue: -92.8125;
}

.ball:nth-child(68) {
    --delay: -15.703125s;
    --angle: -5653.125deg;
    --hue: -94.21875;
}

.ball:nth-child(69) {
    --delay: -15.9375s;
    --angle: -5737.5deg;
    --hue: -95.625;
}

.ball:nth-child(70) {
    --delay: -16.171875s;
    --angle: -5821.875deg;
    --hue: -97.03125;
}

.ball:nth-child(71) {
    --delay: -16.40625s;
    --angle: -5906.25deg;
    --hue: -98.4375;
}

.ball:nth-child(72) {
    --delay: -16.640625s;
    --angle: -5990.625deg;
    --hue: -99.84375;
}

.ball:nth-child(73) {
    --delay: -16.875s;
    --angle: -6075deg;
    --hue: -101.25;
}

.ball:nth-child(74) {
    --delay: -17.109375s;
    --angle: -6159.375deg;
    --hue: -102.65625;
}

.ball:nth-child(75) {
    --delay: -17.34375s;
    --angle: -6243.75deg;
    --hue: -104.0625;
}

.ball:nth-child(76) {
    --delay: -17.578125s;
    --angle: -6328.125deg;
    --hue: -105.46875;
}

.ball:nth-child(77) {
    --delay: -17.8125s;
    --angle: -6412.5deg;
    --hue: -106.875;
}

.ball:nth-child(78) {
    --delay: -18.046875s;
    --angle: -6496.875deg;
    --hue: -108.28125;
}

.ball:nth-child(79) {
    --delay: -18.28125s;
    --angle: -6581.25deg;
    --hue: -109.6875;
}

.ball:nth-child(80) {
    --delay: -18.515625s;
    --angle: -6665.625deg;
    --hue: -111.09375;
}

.ball:nth-child(81) {
    --delay: -18.75s;
    --angle: -6750deg;
    --hue: -112.5;
}

.ball:nth-child(82) {
    --delay: -18.984375s;
    --angle: -6834.375deg;
    --hue: -113.90625;
}

.ball:nth-child(83) {
    --delay: -19.21875s;
    --angle: -6918.75deg;
    --hue: -115.3125;
}

.ball:nth-child(84) {
    --delay: -19.453125s;
    --angle: -7003.125deg;
    --hue: -116.71875;
}

.ball:nth-child(85) {
    --delay: -19.6875s;
    --angle: -7087.5deg;
    --hue: -118.125;
}

.ball:nth-child(86) {
    --delay: -19.921875s;
    --angle: -7171.875deg;
    --hue: -119.53125;
}

.ball:nth-child(87) {
    --delay: -20.15625s;
    --angle: -7256.25deg;
    --hue: -120.9375;
}

.ball:nth-child(88) {
    --delay: -20.390625s;
    --angle: -7340.625deg;
    --hue: -122.34375;
}

.ball:nth-child(89) {
    --delay: -20.625s;
    --angle: -7425deg;
    --hue: -123.75;
}

.ball:nth-child(90) {
    --delay: -20.859375s;
    --angle: -7509.375deg;
    --hue: -125.15625;
}

.ball:nth-child(91) {
    --delay: -21.09375s;
    --angle: -7593.75deg;
    --hue: -126.5625;
}

.ball:nth-child(92) {
    --delay: -21.328125s;
    --angle: -7678.125deg;
    --hue: -127.96875;
}

.ball:nth-child(93) {
    --delay: -21.5625s;
    --angle: -7762.5deg;
    --hue: -129.375;
}

.ball:nth-child(94) {
    --delay: -21.796875s;
    --angle: -7846.875deg;
    --hue: -130.78125;
}

.ball:nth-child(95) {
    --delay: -22.03125s;
    --angle: -7931.25deg;
    --hue: -132.1875;
}

.ball:nth-child(96) {
    --delay: -22.265625s;
    --angle: -8015.625deg;
    --hue: -133.59375;
}

.ball:nth-child(97) {
    --delay: -22.5s;
    --angle: -8100deg;
    --hue: -135;
}

.ball:nth-child(98) {
    --delay: -22.734375s;
    --angle: -8184.375deg;
    --hue: -136.40625;
}

.ball:nth-child(99) {
    --delay: -22.96875s;
    --angle: -8268.75deg;
    --hue: -137.8125;
}

.ball:nth-child(100) {
    --delay: -23.203125s;
    --angle: -8353.125deg;
    --hue: -139.21875;
}

.ball:nth-child(101) {
    --delay: -23.4375s;
    --angle: -8437.5deg;
    --hue: -140.625;
}

.ball:nth-child(102) {
    --delay: -23.671875s;
    --angle: -8521.875deg;
    --hue: -142.03125;
}

.ball:nth-child(103) {
    --delay: -23.90625s;
    --angle: -8606.25deg;
    --hue: -143.4375;
}

.ball:nth-child(104) {
    --delay: -24.140625s;
    --angle: -8690.625deg;
    --hue: -144.84375;
}

.ball:nth-child(105) {
    --delay: -24.375s;
    --angle: -8775deg;
    --hue: -146.25;
}

.ball:nth-child(106) {
    --delay: -24.609375s;
    --angle: -8859.375deg;
    --hue: -147.65625;
}

.ball:nth-child(107) {
    --delay: -24.84375s;
    --angle: -8943.75deg;
    --hue: -149.0625;
}

.ball:nth-child(108) {
    --delay: -25.078125s;
    --angle: -9028.125deg;
    --hue: -150.46875;
}

.ball:nth-child(109) {
    --delay: -25.3125s;
    --angle: -9112.5deg;
    --hue: -151.875;
}

.ball:nth-child(110) {
    --delay: -25.546875s;
    --angle: -9196.875deg;
    --hue: -153.28125;
}

.ball:nth-child(111) {
    --delay: -25.78125s;
    --angle: -9281.25deg;
    --hue: -154.6875;
}

.ball:nth-child(112) {
    --delay: -26.015625s;
    --angle: -9365.625deg;
    --hue: -156.09375;
}

.ball:nth-child(113) {
    --delay: -26.25s;
    --angle: -9450deg;
    --hue: -157.5;
}

.ball:nth-child(114) {
    --delay: -26.484375s;
    --angle: -9534.375deg;
    --hue: -158.90625;
}

.ball:nth-child(115) {
    --delay: -26.71875s;
    --angle: -9618.75deg;
    --hue: -160.3125;
}

.ball:nth-child(116) {
    --delay: -26.953125s;
    --angle: -9703.125deg;
    --hue: -161.71875;
}

.ball:nth-child(117) {
    --delay: -27.1875s;
    --angle: -9787.5deg;
    --hue: -163.125;
}

.ball:nth-child(118) {
    --delay: -27.421875s;
    --angle: -9871.875deg;
    --hue: -164.53125;
}

.ball:nth-child(119) {
    --delay: -27.65625s;
    --angle: -9956.25deg;
    --hue: -165.9375;
}

.ball:nth-child(120) {
    --delay: -27.890625s;
    --angle: -10040.625deg;
    --hue: -167.34375;
}

.ball:nth-child(121) {
    --delay: -28.125s;
    --angle: -10125deg;
    --hue: -168.75;
}

.ball:nth-child(122) {
    --delay: -28.359375s;
    --angle: -10209.375deg;
    --hue: -170.15625;
}

.ball:nth-child(123) {
    --delay: -28.59375s;
    --angle: -10293.75deg;
    --hue: -171.5625;
}

.ball:nth-child(124) {
    --delay: -28.828125s;
    --angle: -10378.125deg;
    --hue: -172.96875;
}

.ball:nth-child(125) {
    --delay: -29.0625s;
    --angle: -10462.5deg;
    --hue: -174.375;
}

.ball:nth-child(126) {
    --delay: -29.296875s;
    --angle: -10546.875deg;
    --hue: -175.78125;
}

.ball:nth-child(127) {
    --delay: -29.53125s;
    --angle: -10631.25deg;
    --hue: -177.1875;
}

.ball:nth-child(128) {
    --delay: -29.765625s;
    --angle: -10715.625deg;
    --hue: -178.59375;
}

.ball:nth-child(129) {
    --delay: -30s;
    --angle: -10800deg;
    --hue: -180;
}

.ball:nth-child(130) {
    --delay: -30.234375s;
    --angle: -10884.375deg;
    --hue: -181.40625;
}

.ball:nth-child(131) {
    --delay: -30.46875s;
    --angle: -10968.75deg;
    --hue: -182.8125;
}

.ball:nth-child(132) {
    --delay: -30.703125s;
    --angle: -11053.125deg;
    --hue: -184.21875;
}

.ball:nth-child(133) {
    --delay: -30.9375s;
    --angle: -11137.5deg;
    --hue: -185.625;
}

.ball:nth-child(134) {
    --delay: -31.171875s;
    --angle: -11221.875deg;
    --hue: -187.03125;
}

.ball:nth-child(135) {
    --delay: -31.40625s;
    --angle: -11306.25deg;
    --hue: -188.4375;
}

.ball:nth-child(136) {
    --delay: -31.640625s;
    --angle: -11390.625deg;
    --hue: -189.84375;
}

.ball:nth-child(137) {
    --delay: -31.875s;
    --angle: -11475deg;
    --hue: -191.25;
}

.ball:nth-child(138) {
    --delay: -32.109375s;
    --angle: -11559.375deg;
    --hue: -192.65625;
}

.ball:nth-child(139) {
    --delay: -32.34375s;
    --angle: -11643.75deg;
    --hue: -194.0625;
}

.ball:nth-child(140) {
    --delay: -32.578125s;
    --angle: -11728.125deg;
    --hue: -195.46875;
}

.ball:nth-child(141) {
    --delay: -32.8125s;
    --angle: -11812.5deg;
    --hue: -196.875;
}

.ball:nth-child(142) {
    --delay: -33.046875s;
    --angle: -11896.875deg;
    --hue: -198.28125;
}

.ball:nth-child(143) {
    --delay: -33.28125s;
    --angle: -11981.25deg;
    --hue: -199.6875;
}

.ball:nth-child(144) {
    --delay: -33.515625s;
    --angle: -12065.625deg;
    --hue: -201.09375;
}

.ball:nth-child(145) {
    --delay: -33.75s;
    --angle: -12150deg;
    --hue: -202.5;
}

.ball:nth-child(146) {
    --delay: -33.984375s;
    --angle: -12234.375deg;
    --hue: -203.90625;
}

.ball:nth-child(147) {
    --delay: -34.21875s;
    --angle: -12318.75deg;
    --hue: -205.3125;
}

.ball:nth-child(148) {
    --delay: -34.453125s;
    --angle: -12403.125deg;
    --hue: -206.71875;
}

.ball:nth-child(149) {
    --delay: -34.6875s;
    --angle: -12487.5deg;
    --hue: -208.125;
}

.ball:nth-child(150) {
    --delay: -34.921875s;
    --angle: -12571.875deg;
    --hue: -209.53125;
}

.ball:nth-child(151) {
    --delay: -35.15625s;
    --angle: -12656.25deg;
    --hue: -210.9375;
}

.ball:nth-child(152) {
    --delay: -35.390625s;
    --angle: -12740.625deg;
    --hue: -212.34375;
}

.ball:nth-child(153) {
    --delay: -35.625s;
    --angle: -12825deg;
    --hue: -213.75;
}

.ball:nth-child(154) {
    --delay: -35.859375s;
    --angle: -12909.375deg;
    --hue: -215.15625;
}

.ball:nth-child(155) {
    --delay: -36.09375s;
    --angle: -12993.75deg;
    --hue: -216.5625;
}

.ball:nth-child(156) {
    --delay: -36.328125s;
    --angle: -13078.125deg;
    --hue: -217.96875;
}

.ball:nth-child(157) {
    --delay: -36.5625s;
    --angle: -13162.5deg;
    --hue: -219.375;
}

.ball:nth-child(158) {
    --delay: -36.796875s;
    --angle: -13246.875deg;
    --hue: -220.78125;
}

.ball:nth-child(159) {
    --delay: -37.03125s;
    --angle: -13331.25deg;
    --hue: -222.1875;
}

.ball:nth-child(160) {
    --delay: -37.265625s;
    --angle: -13415.625deg;
    --hue: -223.59375;
}

.ball:nth-child(161) {
    --delay: -37.5s;
    --angle: -13500deg;
    --hue: -225;
}

.ball:nth-child(162) {
    --delay: -37.734375s;
    --angle: -13584.375deg;
    --hue: -226.40625;
}

.ball:nth-child(163) {
    --delay: -37.96875s;
    --angle: -13668.75deg;
    --hue: -227.8125;
}

.ball:nth-child(164) {
    --delay: -38.203125s;
    --angle: -13753.125deg;
    --hue: -229.21875;
}

.ball:nth-child(165) {
    --delay: -38.4375s;
    --angle: -13837.5deg;
    --hue: -230.625;
}

.ball:nth-child(166) {
    --delay: -38.671875s;
    --angle: -13921.875deg;
    --hue: -232.03125;
}

.ball:nth-child(167) {
    --delay: -38.90625s;
    --angle: -14006.25deg;
    --hue: -233.4375;
}

.ball:nth-child(168) {
    --delay: -39.140625s;
    --angle: -14090.625deg;
    --hue: -234.84375;
}

.ball:nth-child(169) {
    --delay: -39.375s;
    --angle: -14175deg;
    --hue: -236.25;
}

.ball:nth-child(170) {
    --delay: -39.609375s;
    --angle: -14259.375deg;
    --hue: -237.65625;
}

.ball:nth-child(171) {
    --delay: -39.84375s;
    --angle: -14343.75deg;
    --hue: -239.0625;
}

.ball:nth-child(172) {
    --delay: -40.078125s;
    --angle: -14428.125deg;
    --hue: -240.46875;
}

.ball:nth-child(173) {
    --delay: -40.3125s;
    --angle: -14512.5deg;
    --hue: -241.875;
}

.ball:nth-child(174) {
    --delay: -40.546875s;
    --angle: -14596.875deg;
    --hue: -243.28125;
}

.ball:nth-child(175) {
    --delay: -40.78125s;
    --angle: -14681.25deg;
    --hue: -244.6875;
}

.ball:nth-child(176) {
    --delay: -41.015625s;
    --angle: -14765.625deg;
    --hue: -246.09375;
}

.ball:nth-child(177) {
    --delay: -41.25s;
    --angle: -14850deg;
    --hue: -247.5;
}

.ball:nth-child(178) {
    --delay: -41.484375s;
    --angle: -14934.375deg;
    --hue: -248.90625;
}

.ball:nth-child(179) {
    --delay: -41.71875s;
    --angle: -15018.75deg;
    --hue: -250.3125;
}

.ball:nth-child(180) {
    --delay: -41.953125s;
    --angle: -15103.125deg;
    --hue: -251.71875;
}

.ball:nth-child(181) {
    --delay: -42.1875s;
    --angle: -15187.5deg;
    --hue: -253.125;
}

.ball:nth-child(182) {
    --delay: -42.421875s;
    --angle: -15271.875deg;
    --hue: -254.53125;
}

.ball:nth-child(183) {
    --delay: -42.65625s;
    --angle: -15356.25deg;
    --hue: -255.9375;
}

.ball:nth-child(184) {
    --delay: -42.890625s;
    --angle: -15440.625deg;
    --hue: -257.34375;
}

.ball:nth-child(185) {
    --delay: -43.125s;
    --angle: -15525deg;
    --hue: -258.75;
}

.ball:nth-child(186) {
    --delay: -43.359375s;
    --angle: -15609.375deg;
    --hue: -260.15625;
}

.ball:nth-child(187) {
    --delay: -43.59375s;
    --angle: -15693.75deg;
    --hue: -261.5625;
}

.ball:nth-child(188) {
    --delay: -43.828125s;
    --angle: -15778.125deg;
    --hue: -262.96875;
}

.ball:nth-child(189) {
    --delay: -44.0625s;
    --angle: -15862.5deg;
    --hue: -264.375;
}

.ball:nth-child(190) {
    --delay: -44.296875s;
    --angle: -15946.875deg;
    --hue: -265.78125;
}

.ball:nth-child(191) {
    --delay: -44.53125s;
    --angle: -16031.25deg;
    --hue: -267.1875;
}

.ball:nth-child(192) {
    --delay: -44.765625s;
    --angle: -16115.625deg;
    --hue: -268.59375;
}

.ball:nth-child(193) {
    --delay: -45s;
    --angle: -16200deg;
    --hue: -270;
}

.ball:nth-child(194) {
    --delay: -45.234375s;
    --angle: -16284.375deg;
    --hue: -271.40625;
}

.ball:nth-child(195) {
    --delay: -45.46875s;
    --angle: -16368.75deg;
    --hue: -272.8125;
}

.ball:nth-child(196) {
    --delay: -45.703125s;
    --angle: -16453.125deg;
    --hue: -274.21875;
}

.ball:nth-child(197) {
    --delay: -45.9375s;
    --angle: -16537.5deg;
    --hue: -275.625;
}

.ball:nth-child(198) {
    --delay: -46.171875s;
    --angle: -16621.875deg;
    --hue: -277.03125;
}

.ball:nth-child(199) {
    --delay: -46.40625s;
    --angle: -16706.25deg;
    --hue: -278.4375;
}

.ball:nth-child(200) {
    --delay: -46.640625s;
    --angle: -16790.625deg;
    --hue: -279.84375;
}

.ball:nth-child(201) {
    --delay: -46.875s;
    --angle: -16875deg;
    --hue: -281.25;
}

.ball:nth-child(202) {
    --delay: -47.109375s;
    --angle: -16959.375deg;
    --hue: -282.65625;
}

.ball:nth-child(203) {
    --delay: -47.34375s;
    --angle: -17043.75deg;
    --hue: -284.0625;
}

.ball:nth-child(204) {
    --delay: -47.578125s;
    --angle: -17128.125deg;
    --hue: -285.46875;
}

.ball:nth-child(205) {
    --delay: -47.8125s;
    --angle: -17212.5deg;
    --hue: -286.875;
}

.ball:nth-child(206) {
    --delay: -48.046875s;
    --angle: -17296.875deg;
    --hue: -288.28125;
}

.ball:nth-child(207) {
    --delay: -48.28125s;
    --angle: -17381.25deg;
    --hue: -289.6875;
}

.ball:nth-child(208) {
    --delay: -48.515625s;
    --angle: -17465.625deg;
    --hue: -291.09375;
}

.ball:nth-child(209) {
    --delay: -48.75s;
    --angle: -17550deg;
    --hue: -292.5;
}

.ball:nth-child(210) {
    --delay: -48.984375s;
    --angle: -17634.375deg;
    --hue: -293.90625;
}

.ball:nth-child(211) {
    --delay: -49.21875s;
    --angle: -17718.75deg;
    --hue: -295.3125;
}

.ball:nth-child(212) {
    --delay: -49.453125s;
    --angle: -17803.125deg;
    --hue: -296.71875;
}

.ball:nth-child(213) {
    --delay: -49.6875s;
    --angle: -17887.5deg;
    --hue: -298.125;
}

.ball:nth-child(214) {
    --delay: -49.921875s;
    --angle: -17971.875deg;
    --hue: -299.53125;
}

.ball:nth-child(215) {
    --delay: -50.15625s;
    --angle: -18056.25deg;
    --hue: -300.9375;
}

.ball:nth-child(216) {
    --delay: -50.390625s;
    --angle: -18140.625deg;
    --hue: -302.34375;
}

.ball:nth-child(217) {
    --delay: -50.625s;
    --angle: -18225deg;
    --hue: -303.75;
}

.ball:nth-child(218) {
    --delay: -50.859375s;
    --angle: -18309.375deg;
    --hue: -305.15625;
}

.ball:nth-child(219) {
    --delay: -51.09375s;
    --angle: -18393.75deg;
    --hue: -306.5625;
}

.ball:nth-child(220) {
    --delay: -51.328125s;
    --angle: -18478.125deg;
    --hue: -307.96875;
}

.ball:nth-child(221) {
    --delay: -51.5625s;
    --angle: -18562.5deg;
    --hue: -309.375;
}

.ball:nth-child(222) {
    --delay: -51.796875s;
    --angle: -18646.875deg;
    --hue: -310.78125;
}

.ball:nth-child(223) {
    --delay: -52.03125s;
    --angle: -18731.25deg;
    --hue: -312.1875;
}

.ball:nth-child(224) {
    --delay: -52.265625s;
    --angle: -18815.625deg;
    --hue: -313.59375;
}

.ball:nth-child(225) {
    --delay: -52.5s;
    --angle: -18900deg;
    --hue: -315;
}

.ball:nth-child(226) {
    --delay: -52.734375s;
    --angle: -18984.375deg;
    --hue: -316.40625;
}

.ball:nth-child(227) {
    --delay: -52.96875s;
    --angle: -19068.75deg;
    --hue: -317.8125;
}

.ball:nth-child(228) {
    --delay: -53.203125s;
    --angle: -19153.125deg;
    --hue: -319.21875;
}

.ball:nth-child(229) {
    --delay: -53.4375s;
    --angle: -19237.5deg;
    --hue: -320.625;
}

.ball:nth-child(230) {
    --delay: -53.671875s;
    --angle: -19321.875deg;
    --hue: -322.03125;
}

.ball:nth-child(231) {
    --delay: -53.90625s;
    --angle: -19406.25deg;
    --hue: -323.4375;
}

.ball:nth-child(232) {
    --delay: -54.140625s;
    --angle: -19490.625deg;
    --hue: -324.84375;
}

.ball:nth-child(233) {
    --delay: -54.375s;
    --angle: -19575deg;
    --hue: -326.25;
}

.ball:nth-child(234) {
    --delay: -54.609375s;
    --angle: -19659.375deg;
    --hue: -327.65625;
}

.ball:nth-child(235) {
    --delay: -54.84375s;
    --angle: -19743.75deg;
    --hue: -329.0625;
}

.ball:nth-child(236) {
    --delay: -55.078125s;
    --angle: -19828.125deg;
    --hue: -330.46875;
}

.ball:nth-child(237) {
    --delay: -55.3125s;
    --angle: -19912.5deg;
    --hue: -331.875;
}

.ball:nth-child(238) {
    --delay: -55.546875s;
    --angle: -19996.875deg;
    --hue: -333.28125;
}

.ball:nth-child(239) {
    --delay: -55.78125s;
    --angle: -20081.25deg;
    --hue: -334.6875;
}

.ball:nth-child(240) {
    --delay: -56.015625s;
    --angle: -20165.625deg;
    --hue: -336.09375;
}

.ball:nth-child(241) {
    --delay: -56.25s;
    --angle: -20250deg;
    --hue: -337.5;
}

.ball:nth-child(242) {
    --delay: -56.484375s;
    --angle: -20334.375deg;
    --hue: -338.90625;
}

.ball:nth-child(243) {
    --delay: -56.71875s;
    --angle: -20418.75deg;
    --hue: -340.3125;
}

.ball:nth-child(244) {
    --delay: -56.953125s;
    --angle: -20503.125deg;
    --hue: -341.71875;
}

.ball:nth-child(245) {
    --delay: -57.1875s;
    --angle: -20587.5deg;
    --hue: -343.125;
}

.ball:nth-child(246) {
    --delay: -57.421875s;
    --angle: -20671.875deg;
    --hue: -344.53125;
}

.ball:nth-child(247) {
    --delay: -57.65625s;
    --angle: -20756.25deg;
    --hue: -345.9375;
}

.ball:nth-child(248) {
    --delay: -57.890625s;
    --angle: -20840.625deg;
    --hue: -347.34375;
}

.ball:nth-child(249) {
    --delay: -58.125s;
    --angle: -20925deg;
    --hue: -348.75;
}

.ball:nth-child(250) {
    --delay: -58.359375s;
    --angle: -21009.375deg;
    --hue: -350.15625;
}

.ball:nth-child(251) {
    --delay: -58.59375s;
    --angle: -21093.75deg;
    --hue: -351.5625;
}

.ball:nth-child(252) {
    --delay: -58.828125s;
    --angle: -21178.125deg;
    --hue: -352.96875;
}

.ball:nth-child(253) {
    --delay: -59.0625s;
    --angle: -21262.5deg;
    --hue: -354.375;
}

.ball:nth-child(254) {
    --delay: -59.296875s;
    --angle: -21346.875deg;
    --hue: -355.78125;
}

.ball:nth-child(255) {
    --delay: -59.53125s;
    --angle: -21431.25deg;
    --hue: -357.1875;
}

.ball:nth-child(256) {
    --delay: -59.765625s;
    --angle: -21515.625deg;
    --hue: -358.59375;
}
</style>

</html>

Output:

Watch on YouTube

Search This Blog

PRØ-GRÂMS TŪTÖRÎ∆L

Featured

Bulb ON/OFF Animation in html and css