A blog about trying to make yourself better at making and designing websites. Also about random shit.

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.

A GIF recording of Stripe's website. It shows me hovering over the navigation which triggers some cool animations on the dropdown menu!

If you open up DevTools, you'd see that different properties are being animated such as color, border, and 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 :hover.

See the Pen Broad City Transition (Hover) by Jag Talon (@jagtalon) on CodePen.

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:

See the Pen Broad City Transition (Hover / Translate) by Jag Talon (@jagtalon) on CodePen.

Furthermore, we're not limited to pseudo class selectors in CSS. We can also use JavaScript to trigger the changes. Remember: What's important is that we're able to change the CSS properties that we want to animate. Try clicking on the circle below.

See the Pen Move Circle (JS) by Jag Talon (@jagtalon) on CodePen.

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!

Extra extra!

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! 🎉