Header set X-XSS-Protection "1; mode=block" 4 Outstanding CSS Transitions – dottDesign
My Journal



4 Outstanding CSS Transitions

One of the biggest differences between websites today and those from the past is the use of CSS. CSS can make a simple website absolutely stunning. CSS Transitions are essentially when a component of a site changes into another component. So as such what happens between the time you drift your mouse over a component and it changes into something else is characterized as the transition. Here are five examples we feel beautifully display the use of CSS transitions.

TRUE 212

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 once you move your mouse over the image the grey box swipes down revealing the image attached with the individual project.



The guys at Bigcommerce have really used CSS Transitions to create something quite beautiful. Instead of creating a boring “About Us” page they have taken it to the next level. As you can see in the image below they have created avatars for each member of the team, these are then displayed once you move your mouse over the images, furthermore each avatar comes with a little info box.



The guys at Codrops have created an amazing tutorial for animated buttons. As you can see in the gif below once your mouse hovers over the different icons on the buttons the image is zoomed out to reveal the current price on the App Store. This is pretty nifty since it allows you to display much more information than normal in a small space.


Hover Effects

Another amazing tutorial created by the guys at Codrops shows how you can use transitions to create amazing effects, as you can see in the image below as soon as you hover your mouse over the image it spins away and reveals text and links for more information.


I am sure there are many more transitions on the web, if you have come across a great one feel free to share it with us in the comments.

via Design Reviver – Web Design Blog

Leave A Comment