Ragtime Kitty

Зависит от верстки.
Если размеры блоков и расстояние между ними фиксированы, то просто картинкой/svg/чем угодно.

Если блоки не статичны и легких путей не ищешь, то тогда канвасом:


Как считать координаты тоже зависит от верстки.
Кривую линию как на картинке у меня не получилось сделать :(

У вас две разных анимации меняют одно и тоже свойство transform. Вторая перезаписывает значения первой. Используй одну анимацию и расставь тайминги, вместо таймаутов в js. По крайней мере на этом этапе. Сдвигать блок вниз лучше через transform: translate

Если усложнять анимацию, то уже надо будет поменять ее структуру.

А чтобы сохранять свойства из 100%{}, используйте animation-fill-mode: forwards;

Верстается элементарно, картинок тут не нужно.

У шрифта, который ты подключаешь, в диапазоне нет комбинируемых диакритических знаков (U+0300..U+036F). Поэтому и шрифт меняется.

Можно нарисовать что угодно внутри одного единственного псевдоэлемента, через svg и data -

Т.е. делаете svg, анимируете его как хотите, переделываете в data url и запихуеваете в background, вуаля.
За рациональность и производительность не ручаюсь.

Open Sans - это семейство шрифтов.

Regular - это обычный вид начертания. У regular font-weight: 400, стандартный. Подключая Open Sans, вы получаете Open Sans Regular
У этого шрифта вариантов несколько, они могут отличаться насыщенностью, пропорциями, контрастностью и наклоном. Все они есть у гугла
https://fonts.google.com/specimen/Open+Sans

Все просто: прописываете стили для меню в двух состояниях: открытое и закрытое.
По клику на кнопку добавляется класс/состояние.

Да. сделать кнопку "треугольного типа" проще всего через clip-path и polygon
e.g https://jsfiddle.net/jhbxk9es/

Но чтобы стилизовать, вот как на картинке, нужно уже рисовать полигон в SVG.

Мне когда-то примерно тоже самое надо было, но ума сделать все это под углом не хватило. Суть: создаем картинку, рисуем ее в canvas с размерами кусочка, получаем dataURL и вставляем его в background-image.

Тут режется все автоматом по размерам заданной картинки, но можно выбрать количество столбцов/колонок и размеры каждого кусочка. transition-delay нужно ручками задавать, в зависимости от размеров картинки. Можно резать картинку под углом через skewAngle и плясать от этого. Может ругаться на tainted canvases may not be exported, не знаю как побороть, но на локалке все норм.

За "правильность" и рациональность использования не ручаюсь ¯\_(ツ)_/¯

$("a").click(function(event) {
    event.preventDefault();
    target = $(this).attr('href');
    $("video").attr("src", target);
});

Активное видео в карусели выделяй классом

Потому что размер самой картинки 1024x768. Проще всего ее обрезать по высоте.