Wacom Uses CSS3 Transitions

One of my favorite websites right now is Awwwards.com. They showcase a lot of great websites that don’t even hit the normal cusp of society so a lot of these websites end up falling silent before anyone can notice them. Wacom is a great example of a website utilizing CSS3 transitions to make the web experience more fluid for a multi-device audience. I love the artistic approach that they took in designing the interface and the obvious concern they had for the implementation of the portfolio style functionality.

Capture

The real magic here is that the featured state of the products is done with very little code thanks to CSS 3 transitions. The amount of effort you need to use is minimal and it creates a great end product. Just click the image below to view the source code the gets coupled with the transitional elements.

transition-css-full

Wacom’s product page is a great example:

The Attributes Styling

1
2
3
4
5
6
7
8
9
10
11
12
{
-webkit-transition: background-color 0.3s;
-moz-transition: background-color 0.3s;
-ms-transition: background-color 0.3s;
-o-transition: background-color 0.3s;
transition: background-color 0.3s;
width: 240px;
height: 240px;
display: block;
text-align: center;
background-color: #FFF;
}

transition-css-right-to-left

They also gave the hover pseudo state a value:

The Attribute to Change

1
2
3
{
background-color: #01b1ed;
}

The simple fade gives off the impression of an elegant, yet technically savvy company. This happens to be their audience as not every graphic designer will own a Wacom tablet, but every digital artist will want to own a Wacom tablet. Knowing your audience is 50% of the battle.