8 simple CSS3 transitions that will wow your users

CSS3 has introduced countless possibilities for UX designers, and the best thing about them is that the coolest parts are really simple to implement.

Just a couple of lines of code will give you an awesome transition effect that will excite your users, increase engagement and ultimately, when used well, increase your conversions. What’s more, these effects are hardware accelerated, and a progressive enhancement that you can use right now.

Here are 8 really simple effects that will add life to your UI and smiles to your users’ faces.

All of these effects (bar one) are controlled with the transition property. So we can see these effects working, we’ll set up a div in an HTML page:

The transition property has three values: the properties to transition (in our case all of them) the speed of the transition (in our case 0.3 seconds) and a third value which lets you change how the acceleration and deceleration is calculated, but we’ll stick with the default by leaving this blank.

Now all we need to do is change properties, and they’ll animate for us…

1. Fade in

Having things fade in is a fairly common request from clients. It’s a great way to emphasize functionality or draw attention to a call to action.

Fade in effects are coded in two steps: first, you set the initial state; next, you set the change, for example on hover:

.fade
{
opacity:0.5;
}
.fade:hover
{
opacity:1;
}

(Make sure you set the class of your div to “fade” to see this working.)

2. Change color

Animating a change of color used to be unbelievably complex, with all kinds of math involved in calculating separate RGB values and then recombining them. Now, we just set the div’s class to “color” and specify the color we want in our CSS:

.color:hover
{
background:#53a7ea;
}

3. Grow & Shrink

To grow an element, you used to have to use its width and height, or its padding. But now we can use CSS3’s transform to enlarge.

Set your div’s class to “grow” and then add this code to your style block:

5. Square to circle

A really popular effect at the moment is transitioning a square element into a round one, and vice versa. With CSS, it’s a simple effect to achieve, we just transition the border-radius property.

Give your div the class “circle” and add this CSS to your styles:

.circle:hover
{
border-radius:50%;
}

6. 3D shadow

3D shadows were frowned upon for a year or so, because they weren’t seen as compatible with flat design, which is of course nonsense, they work fantastically well to give a user feedback on their interactions and work with flat, or fake 3D interfaces.

This effect is achieved by adding a box shadow, and then moving the element on the x axis using the transform and translate properties so that it appears to grow out of the screen.

Give your div the class “threed” and then add the following code to your CSS:

7. Swing

Not all elements use the transition property. We can also create highly complex animations using @keyframes, animation and animation-iteration.

In this case, we’ll first define a CSS animation in your styles. You’ll notice that due to implementation issues, we need to use @-webkit-keyframes as well as @keyframes (yes, Internet Explorer really is better than Chrome, in this respect at least).

8. Inset border

One of the hottest button styles right now is the ghost button; a button with no background and a heavy border. We can of course add a border to an element simply, but that will change the element’s position. We could fix that problem using box sizing, but a far simpler solution is the transition in a border using an inset box shadow.

Give your div the class “border” and add the following CSS to your styles:

#5 is bad!
If you scroll your mouse on the corners the effect is sketchy!

http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

We’re just keeping the code the same to simplify the demonstration. In a real-world scenario you’d obviously ensure the hit area was separate.

Lumbendil

#3 (shrink), #4 and #5 are bad examples because, since they move the element and it’s done on hover, they glitch on certain examples. I think you should change the example so they don’t glitch, a glitch won’t wow your users… at least not in a good way ;)

http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

Of course not, but no one is suggesting that this is production code. They’re examples, all running on a hover because it makes it easy to compare them.

As I’ve said, in the real world you would probably wrap these in a div and then put the hover on the wrapping div, but that would needlessly complicate the example code.

Lumbendil

I’m saying it because, let’s be honest, a lot of code on the web is copied, pasted, and edited a bit. Quite a lot of time it’s poorly tried, thus glitches which can be found testing a bit might be skiped.

What I’m trying to say is, in my opinion, examples like this, even if they should be simple, should be also complete. Also, it’d show how to apply a transition to the element which isn’t the one being hovered, which would be nice.

The writing also imples that the examples can be used as shown.

Anyway, it’s just my opinion. Personally, I love the Fade in/out and the background/foreground color changes, and the box shadow one.

Great job :)

Chad Ammidown

Well the copy and pasters shouldn’t be getting it done easier for themselves. Let them see the basic form and have to learn something for once instead of claiming to know what they are doing.

http://dt.ideasforweb.com.ua/ Dmitriy

#4 and #5

http://www.arttechint.com/ Suraj Rai

Hi Sara Vieira,
Nowadays every one use internet and spend lot of time to design attractive web pages, but only few people know how to design eye catching web page. You shared some good css3 codes for web page design that is difficult to find. These short codes will help me to increase my designing knowledge. Your post is really nice and helpful for everyone. I hope, you will share some more such type of post in future. Thanks to share such useful post with us.

http://tvshowskingdom.com/ Ronnie_Gardocki

Actually, these examples are very, very simplistic. If you wanna do some cool thing, you need to simply learn how to work with transition/transform properties, and check some 3D-tricks, like flipping content and some more.

Those are really nice. I feel wow when I saw all those style. Some of them are awesome. I used box style on bejore.com

http://blog.goranobradovic.com/ Goran Obradović

Thank you!

John

awesome!

http://jabersalehi.com/ Jaber Salehi

Inset border is awesome:)

Proonymous

On Swing, since you have WebKit key frames broken out separately doesn’t that make the -webkit attributes redundant in the other keyframe section, and vice versa? if the browser is webkit itll render -webkit, so default transform declaration isn’t needed inside WebKit key frames.

VMS

Hi, I applied the shrink effect. But it is shrinking from the top-left side. How can i make it shrink from the middle? Just like in the example.

I have developed a jQuery plugin that moves a group of elements along a circular path. I was initially using CSS Transitions to perform the circular motion, but I was not satisfied with the smoothness of the animations. I switched to Javascript and animations were a lot smoother almost touching 60fps.