Ivan Bogachev

В postcss-trolling есть готовая CSS анимация под вашу задачу. Нужно лишь задать разный animation-delay элементам (возможно с помощью :nth-of-type или :nth-child).

С помощью чего и как можно реализовать вот такую расстановку блоков?

На ум сразу приходит masonry.

Посоветуйте пожалуйста какие-нибудь библиотеки.

Библиотеки - не труъ. Здесь достаточно чистого JS и щепотки GLSL. Рекомендую почитать свое Введение в программирование шейдеров для верстальщиков, там аналогичный пример есть (если картинки не прогружаются, можно включить VPN, там что-то неладное бывает с ними иногда, видно происки фиксиков роскомнадзора). А прямо этот эффект делал Юрий Артюх на одном из стримов.

на айфонах

caniuse.com/#feat=css-animation:

iOS 6.1 and below do not support animation on pseudo-elements. iOS 7 and higher are reported to have buggy behavior with animating pseudo-elements.

Обе лагающие анимации как раз связаны с псевдоэлементами. Имеет смысл их заменить на обычные div-элементы.

Замечание номер раз: код минифицирован, не смотрел.
Замечание номер два: макеты не видел, возможно местами накосячил дизайнер.

Беглый просмотр дал следующее:

№1:
- Шрифтыыыы... Arial - это боль. Вы, вероятно, забыли подключить нужный шрифт
- Иконки социальных сетей слишком маленькие, сложно попасть, можно поболее сделать
- Две иконки одинаковые, нехорошо, путает
- В поле для поиска серым по серому написано - не видно
- Гамбургер есть, но что он делает - не понятно
- В карусели, при нажатии на точки появляется ненужный outline
- В поле для поиска иконка съехала
- Размер шрифта в одинаковых элементах скачет
- Вертикальные отступы скачут
- При адаптиве картинки плющатся
- Какие-то ошибки в консоли

№2
- Такое впечатление, что навигация и текст под ней выровнены не по левому краю
- Так и хочется, чтобы кнопка с рыжей границей при наведении стала вся рыжей, как это обычно и делают
- Выпадающая выбиралка языка и валюты пропадает, ее нельзя использовать мышкой
- Два поля для поиска на одном экране? Хотя это косяк дизайнера, ладно
- Какие-то иконки с сердечками, вопросиками и.т.д. Нужно по крайней мере добавить всплывающие подсказки, что это вообще такое
- Плюс и минус подсвечиваются как одна кнопка
- Интерактив никакой не работает, нужно доделывать
- Имеется непостоянство в подсвечивании элементов при наведении
- Скидки в 70%, круто! Эээ.. А где тут кнопка "показать товары со скидкой"?
- Внезапный шрифт с засечками
- Внезапные серые бордеры, когда только что в такой же секции их не было
- Вертикальные отступы опять везде пляшут
- Белый по желтому не читается
- Опять внезапное выравнивание влево, когда только что в такой же секции было по центру
- Подпишитесь на рассылку! Ввожу почту и понимаю, что кнопки "подписаться" там нет. Fail.
- На телефоне в подвале все выравнивание скачет влево-вправо

Совет номер раз: почитайте про дизайн для недизайнеров и книги от Nick Kolenda, чтобы лучше понимать, где что-то явно не так и имеет смысл поправить.

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

Совет номер три: изучайте JS и доделывайте интерактивные элементы, чтобы ими можно было пользоваться. Не стоит это дело откладывать в черный ящик, работодателям чисто верстка без скриптов нужна очень редко.

У CSS-трансформаций есть такая штука, как transform-origin. В вашем примере эта точка находится по умолчанию в центре элемента. А у нестандартного свойства zoom аналогичная точка по умолчанию в левом верхнем углу элемента. Добавьте вашему workspace transform-origin: 0 0; и поведение станет схожим.

Кроме BrowserStack есть еще сервис CrossBrowserTesting.

Все работает, просто вы полоску сделали слишком маленькой и по ней сложно попасть. Сделайте ее побольше:

.irs-line {
    /* height: 2px; */
    /* background: #bababa; */
    height: 22px;
    background: 0 0 / 100% 2px linear-gradient(to right, #bababa, #bababa) no-repeat;
}

В данном конкретном случае, поскольку текст в таких элементах не меняется, можно сделать все по-простому:

Lorem ipsum dolor sit...
<div class='or-line'>или</div>
Lorem ipsum sit amet...

.or-line {
    text-align: center;
    background: center / 3em 100% no-repeat linear-gradient(to right, #fff, #fff),
        center / 100% 2px no-repeat linear-gradient(to right, #ccc, #ccc);
}

Можно скрыть тот маркер, который есть, а вместо него использовать псевдоэлементы у summary, как-то так:

summary {
  list-style: none;
}

summary::-webkit-details-marker {
    display: none;
}

details summary::before {
    content: ' ';
    display: inline-block;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2l............);
    height: .8em;
    width: .8em;
    background-size: .8em .8em;
}

details[open] summary::before {
    transform: rotate(90deg);
}

Но не забывайте, что IE и Edge эти теги совсем не поддерживают.

CSS трансформации: rotate пластинке - чтобы крутить, translate обертке - чтобы подвинуть на :hover.
CSS анимации - чтобы крутить бесконечно долго.

Делать временные заглушки/плейсхолдеры (называйте как хотите) для картинок с теми же пропорциями. Удобно для этих целей использовать SVG - если сервер знает размер картинки, то можно сгенерировать прямоугольник и вставить SVG с ним в то место, где должна быть картинка, а потом саму картинку абсолютным позиционированием положить на нее сверху. Имеет смысл эти заглушки генерировать заранее (один раз) для загружаемых на сервер картинок. В некоторых случаях можно еще сильнее заморочиться и сделать все не только функционально, но и красиво.

Подобные штуки строятся на анимации transform: scale(...), ну а вариантов с разной длительностью и количеством кругов можно придумать много, тут уж на вкус и цвет...

Это один из багов отображения SVG-картинок во flex-контейнерах. Это вообще больная тема, там эти картинки то схлопываются по ширине, то получают странные отступы в отдельных браузерах. Можно решить, обернув картинку в div с явным указанием display=block для него:

<div class="test">
    <img src="https://123.svg"/>
</div>

.test {
    display: block;
}

В черновиках Selectors Level 4 есть мысль о псевдоклассе :has, который мог бы дать возможность проверять такие связи и писать что-то вроде

.tab-position:has(> .pinned) {
    /* . . . */
}

но на сегодняшний день ни один браузер это не поддерживает. Так что нет, такой селектор в CSS сделать пока нельзя.

если увеличить размер шрифта, то и отступы увеличатся

Так это же замечательно, так и должно быть. И вопрос не только в доступности. Задание всех размеров в rem/em позволяет при изменении размера шрифта сохранить приятный глазу дизайн, у которого не "перекашивается" соотношение веса элементов и негативного пространства. Максимальный эффект достигается при использовании CSS-шлюзов и адаптивной типографики, что дает возможность без лишних движений сделать "красиво" на любых размерах экрана. А если заранее определить с дизайнером все стандартные размеры для всего (я часто использую .3, .5, .8, 1, 1.25, 1.5, 1.75, 2, 3, 4, 5 rem), то можно будет быстро верстать "на глаз", по бумажным наброскам, и даже без дизайнера совсем, используя не гору магических чисел, а известный набор удобных размеров. Конечно, это ломает мозги неподготовленному дизайнеру, но многие модные ресурсы (тот же Smashing Magazine) используют подобный подход весьма успешно.

с помощью css

Можно загуглить обсуждения того, почему эту технологию в 2014 решили убрать из WebKit. Речь там в основном идет о том, что у CSS Custom Filters были проблемы с безопасностью -> ввели ограничения на их использование -> оказалось, что область применения при таком раскладе очень узкая и по факту они не особо то и нужны -> разработчики хрома остановили разработку на пол года, а в других браузерах по сути и не начинали реализовывать все это. Плюс высказывалась мысль, что лучше сделать набор готовых фильтров. Вот и заглохла идея. На сегодняшний день мы можем использовать WebGL в чистом виде, вне CSS, чтобы решать некоторые из задач, для которых вся эта тема затевалась. Эффекты для картинок можно делать руками, а также есть инструменты вроде HTML-GL, позволяющие накладывать эффекты "как бы на страницу" (там страница с некоторыми ограничениями рендерится в контексте WebGL, ну а дальше все так же, как и с картинками).