<main>
  <div class="reference"></div>
</main>

<header>
  <code><span class="property">transform:</span></code>
</header>

<footer>
  <p>Use the CodePen JS panel to modify the transform</p>
</footer>

div {
  /* also try a different transform-origin for kicks*/
  --transform-origin-x: 50%;
  --transform-origin-y: 50%;
  transform-origin: var(--transform-origin-x) var(--transform-origin-y); 
  
  --graph-color: hsla(183, 80%, 0%, .05);
  
  background-color: hsla(var(--hue, 183), 80%, 50%, var(--alpha, 1));
  
  width: var(--side);
  height: var(--side);
  position: absolute;
  top: 0;
  left: calc(var(--side) * -1);
  opacity: 0;
  mix-blend-mode: normal;
  
  background-image: 
    linear-gradient(to right,
      var(--graph-color) 0px, 
      var(--graph-color) 1px),
    linear-gradient(to bottom,
      var(--graph-color) 0px, 
      var(--graph-color) 1px);
  background-position: var(--transform-origin-x) var(--transform-origin-y);
  background-size: 2px 100%, 100% 2px;
  background-repeat: no-repeat;
  
  transition: opacity 200ms ease-in;
}
div:last-of-type {
  mix-blend-mode: normal;
}
main {
  position: relative;
  width: var(--side);
  height: var(--side);
  
  --side: 33vmin;
}

.reference {
  opacity: .3;
  background-color: hsla(183, 80%, 0%, .15);
  border: 3px dashed hsl(183, 80%, 0%);
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: hsl(183, 80%, 98%);
  
  --graph-color: hsl(0,0%,95%); 
  background-image: 
    repeating-linear-gradient(to right, 
      var(--graph-color) 0px, 
      var(--graph-color) 1px, 
      transparent 1px, 
      transparent 1vmin),
    repeating-linear-gradient(to bottom, 
      var(--graph-color) 0px, 
      var(--graph-color) 1px, 
      transparent 1px, 
      transparent 1vmin);
}
*, *::before, *::after {
  box-sizing: border-box;
}
header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  text-align: center;
  padding: 1rem;
  font-size: calc(2vmin + .5rem);
  font-family: monospace;
}
header span {
  display: inline-block;
  padding: .5rem 0 .25rem;
  background: linear-gradient(to right, 
    hsla(var(--hue, 183), 80%, 50%, var(--hue, 0)), 
    hsla(var(--hue, 183), 80%, 50%, var(--hue, 0))) left bottom no-repeat;
  background-size: 100% 20%;
  transition: background 200ms linear;
  margin-right: .75rem;
}
footer {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  text-align: center;
  padding: 2vmin;
  font-size: calc(1vmin + .5rem);
  font-family: system-ui, 'Segoe UI', -apple-system, sans-serif;
}

//add/remove transforms or rearrange them by modifying this array and running again
const transforms = [
  'translateX(66vmin)',
  'rotate(.125turn)',
  'scale(.5)',
  'translateY(66vmin)',
];

var main = document.querySelector('main');
var description = document.querySelector('header');

const opacityBase = transforms.length + 1;
const duration = 2000;
const endOpacity = 1;

const hues = [183, 43, 143, 343, 283];

var divs = [];
var descriptions = [];

transforms.forEach(function(t) {
  let div = document.createElement('div');
  let span = document.createElement('span');
  span.textContent = t;
  
  divs.push(div);
  descriptions.push(span);
  
  main.appendChild(div);
  description.appendChild(span);
});

animateIt(0);

function animateIt(i) {
  var el = divs[i];
  var hue = hues[i % hues.length]
  descriptions[i].style.setProperty('--hue', hue);
  el.style.setProperty('--hue', hue);
  el.style.setProperty('--alpha', (i+1)/opacityBase);
  
  var start = transforms.reduce(function(result, transform, index) {
    return index < i ? result + ' ' + transform : result;
  }, '').trim();
  
  el.style.opacity = endOpacity;
  var animation = el.animate([
    { transform: start || 'translateX(0)' },
    { transform: (start ? start + ' ' : '') + transforms[i] }
  ], {
    fill: 'forwards',
    duration: duration,
    easing: 'ease-out'
  });
  
  if (i < transforms.length - 1) {
    animation.onfinish = function() { animateIt(i+1) };
  }
}