CSS mosaic animation

by Julien Roche

HTML

<section class="grid">
</section>

CSS

html,
body {
  border: none;
  height: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  width: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid {
  background-color: white;
  display: grid;
  grid-template-columns: repeat(10, minmax(50px, 1fr));
  grid-template-rows: repeat(10, 50px);
}

.grid__cell {
  background-color: transparent;
  border: 1px solid black;
  animation: rotate 10s infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  
  25% {
    transform: rotate(45deg);
  }
  
  50% {
    transform: rotate(0deg);
  }
  
  75% {
    transform: rotate(-45deg);
  }
  
  100% {
    transform: rotate(0deg);
  }
}

JavaScript 1.7

let gridElement = document.querySelector('.grid');
let cellsFragment = document.createDocumentFragment();

const nbRows = 10;
const nbColumns = 10;
const nbCells = nbRows * nbColumns;

for (let i = 0; i < nbCells; ++i) {
	let cellElement = document.createElement('div');
  cellElement.classList.add('grid__cell');
  cellsFragment.appendChild(cellElement);
}

gridElement.appendChild(cellsFragment);