Ingernirated

const elements = document.querySelectorAll('.x');
const delay = 1000;
const updateElement = el => el.style.display = 'block';

Вариант раз - таймауты сразу для всех элементов:

elements.forEach((n, i) => setTimeout(updateElement, i * delay, n));

Вариант два - интервал:

let index = -1;

const intervalId = setInterval(() => {
  const el = elements.item(++index);
  if (el) {
    updateElement(el);
  } else {
    clearInterval(intervalId);
  }
}, delay);

Вариант три - рекурсивные таймауты:

(function next(index) {
  if (index < elements.length) {
    setTimeout(() => {
      updateElement(elements[index]);
      next(index + 1);
    }, delay);
  }
})(0);

function move() {
    let wait = 0;
    x.forEach((e) => {
        setTimeout(function() {e.style.display = "block";}, wait);
        wait += 1000;
    }
}

.nice-s {
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
}

Смотря что понимается под

воздействовать на её цвет

есть css фильтры, которым без разницы как сохранена картинка.
filter: invert(100%)
как вариант
Если надо заливать определенным цветом ее части, то это уже про svg, хотя и тут могут быть варианты гибридные где есть svg + любая картинка. Да можно див поверх наложить. Куча вариантов вообще не связанных с форматом картинки.
Так что Вы задачу вначале обрисуйте сдраво, а не "как создать сайт?".

https://jsfiddle.net/mrnobody/pzv9xL3o/1/

Потому что используете float

Из-за свойства "float". Решения: применить к родительскому блоку хак clearfix, либо (лучше) использовать flexbox для выравнивания элементов.

.block {
  width:100%;
  background-color:lightblue;
  display: table;
}

Можно с помощью позиционирования.

body {
  width:100%;
  height:800px;
}
.box {
  width:20%;
  height:25%;
  background-color:green;
  position: relative;
}
.red {
  width:100%;
  height:50px;
  background-color:red;
}
.blue {
  width:100%;
  height:30px;
  background-color:blue;
  position: absolute;
  bottom: 0;
}

Или флексами.

body {
  width:100%;
  height:800px;
}
.box {
  width:20%;
  height:25%;
  background-color:green;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.red {
  width:100%;
  height:50px;
  background-color:red;
}
.blue {
  width:100%;
  height:30px;
  background-color:blue;
}

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Может, потому что вы перепутали align-items и justify-content?

https://jsfiddle.net/rg608sam/1/

If the user agent is configured not to allow automatic or script-initiated playback of media, calling play() will cause the returned promise to be immediately rejected with a "NotAllowedError". Web sites should be prepared to handle this situation.

Отсюда
Запретили, дефолтные настройки браузера, автоматом воспроизводить video
Это можете еще почитать

не надо ничего резать на отдельные картинки.

у css3 анимации можно указать фиксированное количество шагов.

так что выводите блок размером с один кадр, указывайте ему фоном вашу картинку с раскадровкой, делайте анимацию смещения позиции фона и задавайте ей количество шагов равное количеству кадров.

как тут: https://codepen.io/bsl-zcs/pen/lpaGv

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

setTimeout(show(i), i * 300);

Вместо того, чтобы передать в setTimeout функцию, вы её вызываете.

Какие есть варианты исправить косяк:

1. Оберните вызов своей функции в другую функцию, которая будет передана в setTimeout:
   
   setTimeout(() => show(i), i * 300);
   
   
2. Выполните привязку параметра:
   
   setTimeout(show.bind(null, i), i * 300);
   
   
3. Передавайте свою функцию в setTimeout, а параметры, с которыми она должны быть вызвана, укажите отдельно:
   
   setTimeout(show, i * 300, i);
   
   
4. Перепишите свою функцию так, чтобы она возвращала другую функцию:
   
   

   function show(x) {
     return function() {
       // сюда помещаете то, что находится у вас в show сейчас
     };
   }

   
   

Правильное обращение выглядит вот так -.about-box:nth-child(1) div

https://jsfiddle.net/Svupol/j6qva0L2/8/

Если код не меняли - то сначала просто не заметили.
А так, вариантов может быть множество: лишний маржин,паддинг, где-то 100vw или бордер прозрачный - короче по фотографии не вылечить.

Все дело в блочной модели DOM.
Есть такое интересное свойство, которое заставляет блоки включая margin, padding и другие свойства заключаться в ту ширину/высоту, которую вы указали. Оно называется box-sizing: border-box. Почитайте об этом подробнее.

Можно же https://jsfiddle.net/39df1j7n/10/

Только если специфичность этого стиля сделать выше, чем была у того. Например, вместо .red использовать a.red

Просто на hover добавь box-sizing: border-box

.box > div:hover {
border: 2px solid black;
box-sizing: border-box;
}