CSS transitions are what makes simple websites look elegant. Perhaps some would say I have simplified the definition too much but the truth is without transitions many websites would just look bland and bring. So what exactly are CSS Transitions and how can they be applied, that is just some of the things we will cover in this post.
CSS transitions defined:
CSS transitions are pretty much when an element of a website changes into an other element, the process of the change. So in other words what happens between the time you hover your mouse over an element and it changes into something different is defined as the transition. What is good about using CSS Transitions is the fact that you can transition any CSS element from one state to another, in other words the transition effect can be applied to any CSS element. If you are still a little confused the W3C definition of CSS transitions might make things more clear:
CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration. This smoothing animates the changing of a CSS value when triggered by a mouse click, focus or active state, or any changes to the element (including even a change on the element’s class attribute).
One of the great things about CSS Transitions is the fact that they are supported on almost every web browser currently in use. CSS Transitions have been supported in almost all versions of Firefox, Safari and Chrome, as well as being supported in IE 10 and later.
Thanks to CSS pseudo-classes applying transitions couldn’t be easier to apply a simple transitions. With the use of :hover you can easily attach a transition to any object.
When to use them
While it might be tempting to use CSS transitions in all sorts of situations, we really suggest CSS Transitions are not used in excess, as with other CSS effects, when used sparingly it can have a much more powerful effect than if the design is splashed with transitions on every element of the website. Furthermore make sure the CSS Transitions are speedy, there is nothing worse than having to wait to a transition to take place, chances are if your visitors are thinking about the speed of the transition then it is already too slow.
Below we have showcased some websites we feel use CSS Transitions in a beautiful manner.
The TRUE 212 website is a great example of how CSS Transitions can be used on a website, almost all buttons on the site implement some form of CSS Transitions. As you can see in the images below their work section showcases different projects they have completed. Once you move your mouse over one of the images the grey box swipes down revealing the image attached with the individual project.
As you can see on the two images below On Stride has applied CSS Transitions to their buttons. In the image below you see the way the element looks before you hover your mouse over it, and then you see how the element looks after your mouse has hovered over it.
The website for the Design Council is a good example of a website that uses CSS Transitions on a lot of their elements, however the way in which is has been implemented makes it look effective and not as if transitions have been splattered all over the site. As you can see in the image below once you hover your mouse over the heart then the title of the section appears. As you can see in the picture only the icon is displayed for each action, whereas once you hover over the icon the title is displayed.
One of the best examples of brilliant usage of CSS Transitions can be seen on the Biborg website. Their whole design is very well completed and makes the website look stunning. Here is a company that has completed more than 500 projects for other companies and yet the way they display their achievements is done in a beautiful manner. As you can see in the images below the CSS Transition effect is very subtle. While it might be difficult to see the actual changes, once hovering over the different circles you will see that the image within the circle is enlarged. That’s about it but I’m sure you’ve come across some great transitions yourself. Would you mind sharing them with us in the comments?
header image courtesy of Eddie Lobanovskiy