lagudal

не уточнили, какая именно анимация нужна.
Как пример

я осуществлял такой переезд, где-то лет 5 назад, причем это был на тот момент 9-летний сайт c joomla версии 1 еще - переносил на последний на тот момент ВП - не помню уже точно какая тогда ВП версия была.
Перенес тогда плагинами главное - базу пользователей и статьи. Но в принципе, это то, что умелые руки смогут сделать и без плагинов, но мне так было проще тогда. Все остальное - все что в joomla было реализовано при помощи расширений, пришлось переносить вручную - например, фотогалерея была, большой архив, все ручками.
Т.е. не считая базы пользователей и статей можно сказать что весь сайт был сделан заново.

Была статья на хабре. Вроде как запись экрана велась.

если правильно понял, что то наподобие "pure css carousel" ищите.
Например, на codepen.
Как вариант

1. У вас инлайн css записан в синтаксисе sass или less.
2. block__submit - нет точки перед стилями класса.
3. В принципе, первые 2 пункта - пофигу, так как градиенты в svg так не анимируются, тем более по hover.
Т.е. , если вы поменяете ваш css на валидный -

.block__submit {
  transition: hover 5s ease;
  height: 4vmin;
  width: 100%;
}
.block__submit:hover .stop-start {
  stop-color: green !important;
}
.block__submit:hover .stop-end {
  stop-color: red !important;
}

вы увидите, что цвета по наведению меняются, но никакой плавности вы не добьетесь, так как значение цвета - не числовое, а css анимации (в т.ч. transition) применимы только к числовым значениям.
Анимации градиентов в svg делаются немного по другому. Применительно к hover - как вариант

Или вот еще пример, здесь отступ задается как переменная

https://coryrylan.com/blog/css-gap-space-with-flexbox

Ну вот у нас сейчас - для mobile- 22%, для десктоп -52%. Раньше - года 2 назад - гонялись за этими цифрами и тонны человеко-часов были затрачены не только на оптимизацию этих цифр, но и на митинги, посвященные только этому. При этом скорость загрузки страниц конечно в приоритете, но не до 1 и даже не 100 милисекунд.
Сейчас деньги и ресурсы с этого переведены в основном на рекламу. Прирост продаж устраивает руководство полностью, скажу более того, именно сейчас, в пандемию продажи бьют все рекорды.
Так что, если вам не важно чтобы ваш сайт был в различных обзорах на тему "лучшие сайты по показателям google pagespeed insights", то лучше потратить время и деньги на что то другое.

Если нужно анимировать именно path, а не stroke, т.е. когда речь идет не о четкой линии с постоянной толщиной, а о фигуре с размытыми, рваными краями, не имеющей четкой толщины, то к вышеизложенному clip-path.
Как варианты, пример1 , пример2 , пример3.
Ну или что угодно еще в этом же духе на тему Masking SVG Animations

как вариант -

codepen спросить "masonry css grid" - как вариант
тыц и тыц

Мне кажется, быстро не получится. В М2 намешано столько всего, что разбираться надо тщательно, без суеты, в противном случае в голове будет такая каша, что будет только хуже.
Главная трудность, для меня лично, заключается в том, что там очень часто, близкие по сути, однотипные вещи реализованы по разному: связано это с тем, что над системой работает оч много людей, с различными подходами... со временем понимание приходит, у меня еще достаточно черных дыр и белых пятен, но уже не так драматично как раньше.
Правда, у меня не было и нет пока временных рамок.
Посоветовать могу смотреть вот этого чела, у него есть образовательный сайт по М2, правда, основное там платное, но дело свое знает.