As @kevinSmith said, adding UI animation to your site is a matter of using CSS animation/keyframes and being able to add/remove those classes to specific html elements programmatically.
In your free time, check out the jQuery API for documentation and interactive demos.
The JS knowledge required is pretty basic and you can easily follow it, and make very useful UI interactions.
I think the challenge will be more in coming up with a unique UI/UX idea and then trying to implement it with JS/jQuery and HTML/CSS — and making it all look pretty and smooth.
Some practical applications:
Lazyloading of photos/divs/content
Endless page (loading/scrolling)
sliding side menus
dynamically populating sections of a page
These techniques can then be practically applied to for example, to optimize your page and increase your Google Pagespeed Insight score, resulting in optimized and fast loading pages, etc.
For example: Using the above techniques, you can quickly load and render the FCL (First Contentful Load) in mobile and desktop browsers to give a user impression that the page has already finished loading. Meanwhile, you’re loading the rest of the page contents only when needed (i.e. when user is about to scroll down to that position).
or using JS/jQuery, you can intercept all a href calls on a page, and instead call those pages via ajax/axios and then replace the relevant div contents of your current page. Result: the content section on your page is updated while the rest of the pages remain static, giving it that Single Page Application effect. i.e. no reloading of html pages, just sections on the page being udpated dynamically.
Just some few practical/application ideas…