This course was created by the instructor. AI tools were occasionally used during early planning and brainstorming, but all animations, code and final course content were written, built and refined by the instructor.
Keen to gain confidence with animating in CSS? Then you’re in the right place. In this comprehensive CSS animations course, we’ll go from beginner-friendly animation and transition projects that are commonly used when working as a web designer or CSS developer, to animation projects that aren’t commonly seen on the web and really stretch your imagination when it comes to using motion in CSS.
All projects in this course are built using CSS only — no JavaScript is used.
This means you’ll learn how far modern CSS alone can be pushed when it comes to interaction, timing within the animations you produce.
Animation is an area that I feel is often underappreciated in CSS. You’ll frequently see tutorials covering hover effects or simple spinners and while there’s nothing wrong with this and they’re incredibly useful to know, they can sometimes paint the picture that this is all CSS animation has to offer. This course was created to show that this certainly isn’t the case, and that CSS is far more than just a tool for general styling and layouts.
Note for beginners:
Some projects are demonstrated using Flexbox or Grid to arrange elements for clarity and efficiency. You don’t need prior knowledge of Flexbox or Grid to follow along alternative versions using basic CSS techniques are included throughout the course.
This course is also designed to inspire you and help you come up with your own unique animation ideas, animations that could serve as strong showcase projects for your portfolio and help you stand out from the crowd.
Below is a breakdown of the sections we’ll cover in this course:
- Transitions Overview – An overview of transitions in CSS
- Transition Projects – Build 4 different projects that make use of transition effects.
- Animations Overview – An introduction to CSS animations and keyframes.
- Foundational Motion Projects – Build 5 hands-on projects that use either transitions or animations in CSS. This section focuses on strengthening your understanding of motion through practical examples.
- Creative Projects – A section focused on exploring what’s possible with CSS. We’ll build 6 creative prototypes that each lead to a polished final animation, which we’ll then review to see what changed from the prototype and how the animation flow was refined. with examples including a windmill and a bowling animation.
By the end of the course, you’ll have a mix of practical and creative projects CSS only animation projects to add to your portfolio that showcase your animation skills. So if this course feels like a good fit for you, please enroll now.
