Bongie

Перенести transition в :hover

.certificate {
  width: 250px;
  margin: 100px 30px 10px 30px;
}

.certificate:hover {
  transition: transform 0.5s;
  transform: scale(2);
}

Возможно, поможет WooCommerce Variation Swatches или Variation Swatches for WooCommerce.

1. В первую очередь я бы сделал страницу с хорошим адаптивом:

чтобы текст не прилипал к краям экрана, чтобы не было горизонтальных скролов

2. Далее, я бы увеличил размер шрифта, увеличил расстояние межстрочное, убрал бы этот серый цвет шрифта на адекватный темный:



3. Затем, я бы сделал другой формат дат, например: Jul 31, 2017. Да и вообще, этот блок можно оживить миниатюрой, аватаркой и т.д + сам заголовок можно сопровождать фоновой картинкой и т.д, чтобы не выглядело как серый мрачный день, пример блока:



4. Саму навигацию я бы сделал якорным объектом, привязанной к углу экрана или по крайней мере выровнял бы с текстом, сейчас сьехало + сьехали серые разделители-полоски

5. Панель боковая:



а) убрать бы эти темные рамки сверху снизу, оставить только справа панельку, зачем при открытии панели обрезать пол экрана?
б) в этой панели убрать "где я сейчас" и так понятно где.
в) сделать так, чтобы панель не закрывалась при ведении курсора под большим углом, такой прием используют в интернет магазинах с большими списками, я маркером зеленым пометил область с которой проблема в разных вкладках, поиграйтесь с курсором и будет понятно, что области взаимодействия должны быть больше
г) для этого попробуйте курсором попасть из точки А в точку Б - на ссылку фейсбука, боковая панель просто закроется.

6. Зачем вообще нужна боковая панель? Чтобы что? Я бы вообще её убрал в десктопной версии

7. Зачем вообще нужна вкладка Resent? Может имелось ввиду Recent? У меня есть браузер, где есть история страниц. А вот в макете нет возможность логина, а можно было бы подписываться на автора или добавлять статьи в избранное, писать комментарии и т.д

P.s список не полный, но основные мысли я изложил

Выражайте цели более конкретно... В зависимости от них и будет ясна возможность.
Для примера в первом пункте можно использовать :target jsfiddle.net/84hj53u9 Или использовать input radio

2 и 3 пункт это обычный :hover

3. Можно придумать сетку из квадратов(4x4, 8x8 в зависимости от точности). Если мы наезжаем на какой-то квадрат(:hover), то определенный элемент, который привязан к этому квадрату, анимируется. Извращение - да, но работает без JS. jsfiddle.net/znr6k1c3 (если сделать сетку больше, то и контроля будет больше)

4 и 5 Была какая-то новая api(в очень сырой пре-альфа), которая отвечала за появление во вью элемента. Не могу вспомнить(мб путаю с js)... Поддержки никакой, но Вы ничего не пояснили для чего надо.

6. Создаете @keyframes, который будет анимироваться при загрузке контента: jsfiddle.net/6yh0g82w

7. Нет

Все это извращение, которое не имеет смысла. Если у вас задача сделать проект без js, то и анимация не нужна. Ибо задача совсем в другом состоит. А для всего остального давно уже придумали GSAP, animejs и etc

Да, во фреймворках обычно огромное количество кода, который не используется вашим сайтом, но может использоваться другими или при других обстоятельствах.
Прогоните код через минификатор, вполне возможно, что-то лишнее он оттуда и повыкидывает (но только то, что возможно безопасно выкинуть)