Арсений Матыцин

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

В любом случае это вывод циклом, сортированным по году. Ничего сложного.

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

Есть костыль. Ну хотя как костыль, где-то, может, элегантное решение:
Скажем надо задать отступ в 50px.

.wrapper {
margin-top: -25px;
margin-bottom: -25px;
..
.child{
margin-top: 25px;
margin-bottom: 25px;

По такому же принципу сделана сетка почти всех CSS-фреймворков. Но перед использованием почитай про схлопывание отступов.

PS: ну а отступы в право и лево уже селекторами. Но это должно быть очевидным.

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

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

.parent {
grid-template-columns : repeat(6, 1fr)
... }
.child { /*всем*/
grid-column-end: span 2
... }
.child { /*последним двум*/
grid-column-end: span 3
... }

Но вообще grid пока еще не совместимы с ослом. Я бы воздержался их использовать, если ты не клал болт на поддержку IE.

Flexbox + order для изменения порядка (визуального).

1. Border image
2. 2 дополнительные обертки с псевдоэлементами
3. В принципе псевдоэлементы
4. SVG

Вообще да, для нормальной работы с анимациями обычно используют сторонние библиотеки. Но вообще Vue сам считает начало и конец анимации. И из коробки дает инструмент для создания отсроченной анимации и т.д.

Погоди я не понял. Ты пытаешься свой велосипед изобрести?

Глянул каменты:

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

Пикселы — фиксированные значения. Если тебе нужен плавающий шрифт в зависимости от экрана — используй относительные. Скажем vw\vh.