Тарас Шульга

Что вы там соберетесь создавать?)
Сперва примеры готовых анимаций, теперь сколько из них может обхватить jQuery?
Если по вопросу, то он может сделать все что может css/чистый js(ну я по крайней мере не встречал анимацию которую нельзя сделать на js)

и если я подключаю стили в теле самой страницы все работает корректно, однако если стили прописываю в файле css то эффект появления элемента искажается

Искажаться - это не работает, или работает не так? Если первое то css/js(старые у тебя в кеше - почисти его), или твой код(jquery) с кем-то там конфликтует(это смотри консоль). Если второе, то скорее всего что-то перебивает твои стили и все.

такая ситуация происходит только на вордпрессе.

Это ты и другие cms побывал или глянул на невинной верстке и потом начал тыкать в WP?

P.S. тяжко, что-то говорить - вы нам предоставили чистый код в вакуме по которому ничего не скажешь/не поймешь. Это все равно, что я вам кино вот такой код https://codepen.io/angryyum/pen/RwNprJP и скажу тута она работает, а вот на WP не хочет, но я подключил все правильно - это точно! В чем проблема?

Согласитесь тяжко понять причину - не видя среды где ошибка возникает.

Если правильно понял, то вам нужно сделать так, чтобы элемент скролился в упор до футера.
Ну тогда ТЫК
Вот пример https://codepen.io/angryyum/pen/vYEZNor

Сие чудо обычно именуют progress-bar
https://codepen.io/search/pens?q=progress+bar вот вам куча примеров, идите изучайте.

И так варианты решение данной проблемы:
1. Поиграться с svg маской.
2. after/before.
3. Самое простое, но там поддержка еще немного хромает clip-path(тык-тык - это ссылка)
А вот его поддержка тык

И так обычно при разработке сайтов есть две версии (это пример как у меня) папка ля разработки в ней все разбито на отдельные (css(less)/html/js/картинки) и т.д.

Что, где? fonts - шрифты, less(все файлы less разбитые по страницам/модулям), img(логично - картинки, ну и там внутри разбито - иконки, фоны, обычные картинки и т.д.) js(там все скрипты по файлам), ну и moduls (разбиты повторяющиеся html блоки аля header/footer/aside которые просто подключаю в нужном мне месте)
Это все папка, чисто для меня для разработки.

Там уже собственно весь js собран в один файл main.js/ css в main.css, сжатые картинки, убраны комментарии кода, ну и т.д.(тобишь, то к чему в дальнейшем буду писать бек/епредавать заказчику.)
То есть, то что пойдет в общий доступ. Обычно передаю обе версии (продакшен - ну логично, а вторая на случай если будут дописывать функционал/править, ну и т.д.)
Ну а теперь ответ как правильно все это оформлять?
Тут вам точного ответа никто не даст - разве, что общие рекомендации - так как разбивка и т.д. проводиться, чисто для удобства разработчика (как вам будет удобней работать.)
P.S. Насчет мобильной версии, ну тут довольно логично делаем файлик media(ну или любое другое название)
И просто пишем к нему медиа запросы - тоже довольно логично)

https://codepen.io/angryyum/pen/RwNprJP Как-то так если правильно понял идею

Если как вы говорите вам нужно пощупать код, то слава гуглу https://codepen.io/search/pens?q=calck и смотрите тыкайте сколько хотите.