Tiny Web Wednesdays: How to add animations on your website with CSS Transitions
Welcome to Tiny Web Wednesdays! It's where we talk a tiny bit about web development every Wednesday.
I know I know. It’s a Thursday. But better late than never, right?
So let’s talk about animations. Now there are different ways to do animations on the web, but let’s focus on something called CSS Transitions for today.
If you go look on websites like YNAB, Stripe, or Microsoft, you'd see that there are animations sprinkled around the page. Try hovering on different links, menus, and buttons, and you'd see some sort of animation happening ever so slightly.
If you open up DevTools, you'd see that different properties are being animated such as
background properties. Take note that only a handful of properties can be animated. Check out the list on MDN if you want to see the full list of properties that you can animate!
Ok, so let's learn about transitions, shall we? First you have to know that transitions work by animating the change in a property. To animate a property such as
opacity, we need to be able to change its values in CSS.
One way to change a property in CSS is through pseudo class selectors like
As you can see in the Pen above, we set the initial value to
opacity: 1 (this is actually the default, but I want to show you to be explicit) to
opacity: 0. Whenever you hover, the browser figures out how to animate when it switches between these two values. Of course we're not limited to just the
opacity property either! Let's try it with
transform to move the image left and right:
What's happening is that we're modifying the
transform property whenever we click on the circle by adding the
.move class to the element.
And there you have it! Now you know the basics. If you want to learn more about transitions, check out Thoughtbot's excellent tutorial: CSS Transitions and Transforms for Beginners. For homework, try adding tiny animations to links and buttons on a website that you're working on right now. Try going to your favorite sites as well and find some transitions in action.
That's it for today! Hope you learned something!
- Learn about debugging animations in DevTools.
- Learn about deep-sea creatures and animations with Firefox's DevTools Challenger.
If you liked this series, I'd love your support! You can get the episode early, get mentioned in the show, and show your love at Patreon! 🎉