I can't help but feel I'm doing this wrong (CSS animations / jQuery) ...

I'm not sure if you're just asking about jQuery vs CSS animations or general code maintenance as well, I'll try answering both with the best to my knowledge. Hope this helps.

Here goes, so when it comes to animations: as long as you're avoiding the jQuery animate function and animating using CSS animations and transitions then you're on the safe side when it comes to heavy usage on the DOM. Refer to this short article on CSS3 vs jQuery Transition Speeds.

If you're talking about general code maintenance then always try to align yourself to design principles, such as DRY - Don't repeat yourself, YAGNI - You aren't Gonna Need it ... The bigger and more complex the project you're working on, the more efficient you'll have to work on writing your code. So for future reference, you can trace it easily and understand all the operations leading to whatever result you're working on.

Always make sure your code is well formatted and easy to read. Don't copy, paste chunk of codes and alter it for different purpose. Try to put them in methods/functions and link to them with whatever variables and thus applying that chunk of code on them and returning the result accordingly. Interesting read about when writing code

I've been where you at before and I always find myself from time to time lost when I'm trying to maintain my own code. Just try to get others to read your code and watch how they interpret it, are they constantly going up and down trying to understand where is x and how did it reach y. Or is it in a smooth hierarchal flow with a clear implemented algorithm.