JavaScript анимация

Question

У меня есть код, заполняющий окно браузера красными плитками.
Этот скрипт ищет диагональ, и должен менять цвет каждой диагонали поочерёдно с небольшой задержкой. То есть сначала левая верхняя плитка становится другого цвета затем идёт диагональ и т.д.
HTML:
<div id="tiles"></div>
CSS:

body {
  background-color: #333;
  overflow: hidden;
}

.tile {
  background-color: #993333;
  border: 1px solid #661111;
  border-width: 1px 1px 0 0;
  box-sizing: border-box;
  height: 5vh;
  width: 5vw;
  float: left;
}

JS:

var totalRows = 20;
var totalCols = 20;
var delay = 0.5; // задержка

var tiles = createTiles(totalRows, totalCols);
var diagonals = getDiagonals(tiles, totalRows, totalCols);


function getDiagonals(array, rows, cols) {
    var diagonals = [];
    for (var i = 0; i < rows + cols - 1; i++) {
        var row = 0;
        var col = i;
        var diagonal = [];
        while (col >= 0 && row < rows) {
            if (col < cols) {
                diagonal.push(array[row * cols + col]);
            }
            row++;
            col--;
        }
        diagonals.push(diagonal);
    }
    return diagonals;
}

function createTiles (rows, cols) {
    var tilesHtml = '';
    for (var i = 0; i < rows * cols; i++) {
        tilesHtml += '<div class="tile"></div>';
    }
    var tiles = document.getElementById('tiles');
    tiles.innerHTML = tilesHtml;
    return tiles.querySelectorAll('.tile');
}

Я не знаю как сделать задержку, я пытался реализовать это через цикл, но ничего не вышло, потому что они сразу меняют цвет без анимации.

for (var i = 0; i < diagonals.length; i++) {
  for (var j = 0; j < diagonals[i].length; j++) {
    var tile = diagonals[i][j];

    tile.style.backgroundColor = "green";
  }
}

Я знаю, что это можно реализовать с помощью setTimeout, но я не знаю, как это сделать для двумерного массива.

Чтобы работа кода была похожа на это.
1111 | 0111 | 0011 | 0001 | 0000 | 0000 | 0000 | 0000
1111 | 1111 | 0111 | 0011  | 0001 | 0000 | 0000 | 0000
1111 | 1111 | 1111 | 0111  | 0011  | 0001 | 0000 | 0000
1111 | 1111 | 1111 | 1111  | 0111   | 0011 | 0001 | 0000
Код должен работать так, чтобы при одном прохождении цикла окрашивалась одна диагональ полностью(не по одной плитке).

Answer 1

var totalRows = 20;
var totalCols = 20;
var delay = 0.5; // задержка
var tiles = createTiles(totalRows, totalCols);
var diagonals = getDiagonals(tiles, totalRows, totalCols);
function getDiagonals(array, rows, cols) {
  var diagonals = [];
  for (var i = 0; i < rows + cols - 1; i++) {
    var row = 0;
    var col = i;
    var diagonal = [];
    while (col >= 0 && row < rows) {
      if (col < cols) {
        diagonal.push(array[row * cols + col]);
      }
      row++;
      col--;
    }
    diagonals.push(diagonal);
  }
  return diagonals;
}
function createTiles(rows, cols) {
  var tilesHtml = '';
  for (var i = 0; i < rows * cols; i++) {
    tilesHtml += '<div class="tile"></div>';
  }
  var tiles = document.getElementById('tiles');
  tiles.innerHTML = tilesHtml;
  return tiles.querySelectorAll('.tile');
}
var delayCounter = 0;
for (var i = 0; i < diagonals.length; i++) {
  for (var j = 0; j < diagonals[i].length; j++) {
    setTimeout(function(aTile) {
      aTile.style.backgroundColor = "green";
    }, delay * delayCounter++ * 100, diagonals[i][j]);
  }
}

body {
  background-color: #333;
  overflow: hidden;
}

.tile {
  background-color: #993333;
  border: 1px solid #661111;
  border-width: 1px 1px 0 0;
  box-sizing: border-box;
  height: 5vh;
  width: 5vw;
  float: left;
}

<div id="tiles"></div>