The full video and many others like it are all available as part of our Frontend Masters subscription.

Rachel Nabors

Rachel Nabors is a CSS animations fanatic and award-winning cartoonist. A regular conference speaker, she ignites new technology with her experience in visual storytelling.

Rachel Nabors

Web Animation

Rachel wraps up her discussion on CSS transitions by talking about browser support. She also shares a few summarizing points about the advantages of using CSS transitions and answers a few audience questions.

Get Unlimited Access Now

Rachel Nabors: So let's talk about that coverage. As of this recording, CSS transitions are pretty darn well supported. Pretty much any thing but IE 9 and lower and Opera Mini can have access to it. You can see that way off over there Android browser 4.3 probably still requires a dash webkit prefix to it, but across the board, transitions are awesome.

There is another really great reason for using transitions, which is that they are pretty bulletproof. Let's talk about that in a moment. Other reasons that transitions rock. With a single fire, they're great if you only want something to happen once. For instance, you just want it happen from getting from point A to point B.

You don't need it to repeat. You don't need to run several times and then stop. Transitions are wonderful if you just want one thing to change. Granularity, if you only want to animate one or two properties in a given state and given conditions. They're also bulletproof, this is the nice thing.

For all of those browsers that are read, that is, to say IE8 and cohort and Opera, Opera Mini, specifically. If transitions aren't supported, the change will happen anyway, it's just a jump cut. The browser is going to, let me demonstrate how this looks on my site. I use my site now because when I use other people sites, I used to actually do these demos on other people sites.

If I said anything negative, they'd get really sad. So I use my own site, because I can make fun of it all I want, and nobody gets sad except me. So watch what happens when I remove the transition on my very own menu sidebar. Well, it just jump cuts.

It's still usable, it's just not doing the fancy transition. Of course, for an older user, this might be a little confusing. What happened? Where did the sidebar go? I have to move my mouse. That's so difficult, and I don't like it. So, but this is how it could look in a degraded example.

If you wanted to offer people the ability to turn off animations on your site, you could build using transitions to keep in mind that when you click on something, it will do the thing. It will remove itself or change. It just won't be animated when it does that.

Rachel Nabors: Do we have any questions about transition?
Rachel Nabors: I see a question.
Speaker 2: What properties can you not transition?
Rachel Nabors: There are several, there was a link earlier on that goes to the, it should be in the workshop notes as well. Back at getting started or meeting transitions, the very first thing in the curriculum.

There is a list, there's not much that you can animate or transition. Many CSS properties are animatable or transitional, but the ones that aren't are things like display. And there's how do you animate between display block and display inline? I know you're thinking you could animate between display none and display block by fading.

But that would actually be animating opacity. So opacity is transitionable or animateable, but display not so much. It's kind of like a Zen riddle. What is the sound of a tree falling in the woods with no one there to hear? What is the transition between display block and display inline?

Ooh, I don't want to think about it. Other things like circular gradients also not transitionable or animatable probably because the W3C hasn't gotten around to talking about how exactly should that work. Should it be like iris swiping? Should it be like doing a counterclockwise thing? It's just a little less straightforward than linear gradients.

So there's not much you can't animate, but they are things where you can't really imagine them animating.
Rachel Nabors: Good question. I implore you to look at that link to be certain, yes?
Speaker 3: I have a question here from Kevin L. He's wondering what transition pet peeve do you have beyond easing choices gone bad?

Or similarly, what is a non-obvious mistake that you encourage us to avoid with transitions?
Rachel Nabors: I actually love transitions. So it's hard for me to think of anything negative to say about them aside from what I've already said about using transition all. I see it in so many libraries.

I see it in so many corporate style sheets. It's just either uninformed development or a lazy development. And it does come back to bite people in the butt when you have people editing code bases and going why is this animating on this page all of the sudden? I don't understand, what did I do?

Because somebody put transition all on something. And if you're working in a big system, you probably should be handling your transitions and animations in very specific ways using a custom mixin or having a custom style sheet for it. Where people make edits to say I want this thing to change so that we know everything doesn't change by default.

So that's my main pet peeve, otherwise transitions are my absolute favorite friend in the animation echo sphere.

Ready to take your code to the next level?

Intense courses with world-class teachers and unlimited access to our growing library of videos for the great price of $39 per month.

Get Unlimited Access Now