<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
:root {
  --duration-base: 2000;
}

div {
  --hue: 43;
  --color: hsl(var(--hue), 70%, 50%); 
  background: var(--color);
  width: 16.667vmin;
  height: 16.667vmin;
  will-change: transform;
  animation: move 2000ms 1000ms 2 alternate ease-in-out both;
}
.advanced-calc div {
  animation-duration: calc(var(--duration-base) * 1ms);
  animation-delay: calc(var(--duration-base) * .5ms);
}

div:nth-child(2) {
  --duration-base: 2500
}
div:nth-child(3) {
  --duration-base: 2900
}
div:nth-child(4) {
  --duration-base: 3250
}
div:nth-child(5) {
  --duration-base: 3600
}
div:nth-child(6) {
  --duration-base: 3900
}


@keyframes move {
  to {
    transform: translateX(90vw);
  }
}


body {
  background: hsl(223, 12%, 12%);
}
var divs = Array.from(document.querySelectorAll('div'));
var baseHue = parseFloat(getComputedStyle(divs[0]).getPropertyValue('--hue'));
divs.forEach(function(div, i) {
  div.style.setProperty('--hue', baseHue + (i * 60));
});

checkFancyCalc();
//check for Advanced Calc support
function checkFancyCalc() {
  document.body.style.animationDuration = 'calc(1 * 1000ms)';
  var duration = getComputedStyle(document.body).animationDuration;

  if (duration[0] != '0') {
    document.body.classList.add('advanced-calc');
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.