Hey, what's that green and blue graphic doing? Moving? You mean there's motion coded right into CSS?? Let's have a nice close look. Can you see the code yet? Look closer. Closer...
Okay, if I haven't hypnotized you yet, have I at least got your attention? Or better yet, are you interested in getting the attention of your website visitors? That's the beauty of web animations!
You've worked hard to build your CSS skills. Time to have some fun. Really, you've earned it. Buried deep in your CSS-coding fingertips is some pretty awesome potential to inject your page elements with life! All you need is to explore what makes a quality animation with the help of the 12 Principles of Animation, and to expand your CSS tool belt with:
Transform() functions
Pseudo-elements
@keyframes
Opacity, iteration, and direction properties
We'll even cover how to add user interactivity:
And don't think animation is just for decoration. Let's enhance the user experience of your sites by jazzing up ordinary user actions!
Ready to dive in and bring your web pages to life?
Yeah, I thought so. 😁 Let's get started!