Inspiration

4 outstanding CSS transitions

July 21, 2014 • By

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.

Screen Shot 2014-08-01 at 4.18.10 PM

Bigcommerce

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.

Screen Shot 2014-08-01 at 4.18.18 PM

Gaming Club

Gaming Club is another great example of how you can utilize CSS Transitions in order to display more information in a confined space. As you can see below once the mouse hovers over one of the four information squares they scroll down to reveal more information.The best casino sites ensures their customer has the best experience right from the moment they click onto the site. For this reason the home page of a casino site is extremely important in a world where you can easily click away and move onto something else. The imagery used by the website is important in attracting visitors so they need to be appealing, modern (ideally not th regular stock photos) and encompass the whole theme of the casino and the website. A site like Gaming Club makes sure its homepage is clear, concise and appealing. Failure to do this could have a massive effect on their profit margins.

Screen Shot 2014-08-01 at 4.18.38 PM

Codrops

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.

Screen Shot 2014-08-01 at 4.18.47 PM

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.

Screen Shot 2014-08-01 at 4.18.52 PM

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.

(Visited 192 times, 1 visits today)