animated grid tiles

w i p

by trentHarlem

HTML

<div id='container'>
<p>
I do nothing yet.
</p>
</div>

CSS

body {
  --l: calc(90vmin/var(--n));
  display: grid;
  grid-template: repeat(var(--n), var(--l))/repeat(var(--n), var(--l));
  place-content: center;
  margin: 0;
  height: 100vh;
  background: #262626;
}

.tile {
  background: linear-gradient(90deg, var(--g)) calc(-1*(var(--i) + var(--j))*var(--l))/calc(var(--n)*var(--l));
  animation: s 1s ease-out infinite alternate, r 2s infinite;
  animation-delay: calc(((var(--i) + var(--j))/var(--n) - 1)*1s);
}

@keyframes s {
  to {
    scale: 0.1;
  }
}

@keyframes r {
  85%, 100% {
    rotate: 1turn;
  }
}

JavaScript

const container = document.getElementById('container')