The illusion of life
Welcome to the course!
I'm excited to introduce you to the world of CSS animations, and animations in general. It was my gateway drug to programming and holds a special place in my heart. Let's have fun as we bring web pages to life.
Because that's what animation is! It takes an otherwise inert object and breathes life into it. How cool is that?
You've learned to create beautiful and functional websites. However, through animation, you can give them gestures, body language, and personality. A few decades back, psychology professor Albert Mehrabian published the book Silent Messages, where he laid out the components of effective communication: the 7%-38%-55% rule. The rule states that effective communication is 7% verbal, 38% tone, and 55% body language. In other words, body language is super important, and with websites, you're stuck with just talking. Animation can give sites the ability to talk with their hands.
It all comes back to Mickey
Now, when I use the word animation, it might well elicit the image of a talking mouse made of circles.
And that's because his mustachioed creator brought animation to the masses through hand-drawn 'cel animation.' But that's just the tip of the iceberg when it comes to the genres of animation. Nowadays, cel animation has largely been replaced by 3D animation, made popular by a bunch of talking toys. Then there's claymation, made popular by talking raisins. I might be starting to see a trend there somewhere. 🤔 Anyhoo, there's animation just about anywhere there's a screen. In our video games, apps, and, of course, websites.
Imagine all the possibilities
Throughout this course, we'll be creating animations for the web through CSS properties. Rather than drawing characters, or posing puppets, we'll be writing snippets of CSS to change the appearance of HTML elements over time. That can mean animating the color of a button:
Providing the user visual feedback when they've made an error:
Or creating a more engaging user experience by adding motion to the loading elements:
As humans, our brains are wired to notice motion. It helps us stay alert to danger, find food, and, as we discussed earlier, the nonverbal cues that are so integral to communication. By animating elements of a page, you can capture the attention of your visitors, and guide them through your site, giving them hints, and creating a more fluid and enjoyable user experience.
So, now that you know what CSS animation is, and why it's so important, let's dive in and start pushing some pixels around our screens!
