I love CSS transitions and animations, in case you haven’t noticed by visiting any of my websites. CSS transitions and animations make the web feel more like an app and provide a more pleasant experience, visually. They also don’t take more than a few lines of code to make. Adding a simple transition to the color of a link can take three lines of code:
-webkit-transition: color 0.3s ease-out;
-moz-transition: color 0.3s ease-out;
transition: color 0.3s ease-out;
That code can make the links on a page transition smoothly between colors. Unfortunately, very few websites bother to use CSS transitions on their websites. Why is this?

One possible reason for this is that CSS transitions are only supported in modern browsers, however this is not a reason to not use transitions because (if used correctly) they don’t negatively affect the behavior of a site when a browser does not support transitions. So perhaps this isn’t the case. One may think that perhaps web designers are not well informed on the topic of CSS transitions, and therefore don’t attempt to use them. But this is likely not the case. Designers of even the world’s biggest websites like Facebook and Google are certainly not ignorant about transitions and their compatibility with other browsers. CSS transitions are also not a difficult skill to master and there are plenty of guides on the Internet to learn to use them, so I have a difficult time believing that anyone is having a difficult time learning how to use them.

So if it isn’t compatibility and it isn’t ignorance, why is the use of CSS transitions not widespread? If a few lines of code can improve the look of a site of even in a subtle way, why not implement it in your site? To be honest, I don’t know the answer to this question. I am writing this post as an open question. Is there a good reason not to use simple transitions on a site? Why don’t the world’s largest sites use them? Is there a something that I am missing here? If you have the answer, please don’t hesitate to let me know via the reply tool at the top of this post.