Андрей Глазачев

1) В css создаете класс (например animate-me)
2) на него навешиваете Вашу анимацию

.animate-me {
animation: animName 1s ease;
}

3) Вешаем событие на клик

$(document).ready(function () {
    $(".block").click(function () {
        $(this).toggleClass('animate-me');
    });    
});

Я может чего не понял, а что мешает вот так сделать? https://jsfiddle.net/Stilons/9peL0d1c/7/

Себе заказал недавно, но еще жду:
https://tehnomaks.ru/catalog/detail/4981d1175f7468...
Есть такой же, но с R5. Полностью укладывается в ваш бюджет + 16Гб оперативы. Единственный минус, что нет подсветки клавиш.
Тоже долго выбирал себе ноут в итоге остановился на данном варианте.

Это делается микроразметкой Open Graph. Распространенная типовая задача, мало кто делает по умолчанию)
Ссылка: https://valerykoretsky.com/blog/metatags-vk-facebo...

Попробуйте на swiper сделать подобное. Там есть крутые 3D эффекты и сделано что нужно вам, если верно понял задачу.
Ссылка: https://swiperjs.com/demos/
Скрин эффекта: https://yadi.sk/i/Ie0U1tVKSwf7JQ

100% точный никто не ответит.
Работаю в digital агентстве и мы не замечали корреляции между скрытым и не скрытым меню если это сделано как часть интерфейса. Робот в любом случае проходится по разметке и видит эти элементы в верстке.
Больше влияют поведенческие в данном случае.

Забавно, что вы об этом спросили, т.к. на прошлой неделе было обсуждение по этому поводу)

Что базово нужно изучить далее для ускорения верстки:
- шаблонизатор обязателен для изучения. twig, pug, blade все зависит от задач.
- gulp или webpack обязателен для изучения и внедрения.
- как писали выше, sass или less в качестве препроцессора
Если будут еще вопросы, пиши. Попробую подсказать. Слишком общий вопрос)