Первый вопрос.
Привязывать css-правила или файлы к конкретным страницам не лучшая практика. Так или иначе на сайте используются
сквозные (повторяющиеся от страницы к странице) блоки: шапка, подвал, боковое меню, кнопки, формы и т.д. и т.п. Необходимо учитывать ситуацию, при которой какой-либо блок с одной страницы сайта придётся использовать на другой. В случае же привязки стилей к какой-либо конкретной странице Вам придётся дублировать CSS, что не есть хорошо.
Если в Вашем случае страницы совсем разные и сквозных блоков нет, лучше создать несколько css-файлов с темой. Для каждой страницы своя тема: своё оформление кнопок, форм, заголовков и т.д. Данный подход позволит использовать Ваш CSS повторно, если когда-нибудь понадобиться создать страницу с тем же оформлением, что у одной из существующих на данный момент.
Лучше придерживаться следующего правила:
классы используются для оформления (CSS), идентификаторы - для подключения скриптов (JS).
Второй вопрос.
Браузер применяет все стили, полученные в запрошенном css-файле. Почитайте о механизме
ренедринга стилей браузером, можно узнать много нового!
CSS-анимация в Вашем случае применится в момент наведения на элемент. Тогда же будут задействованы ресурсы браузера для её отрисовки. Загрузка стилей анимации не имеет никакого отношения к процессу её непосредственного старта.