8 simple CSS3 transitions that will wow your users

Default avatar.
May 01, 2014
8 simple CSS3 transitions that will wow your users.

thumbnailCSS3 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:

<!DOCTYPE html>
<html>
<head>
 <style type="text/css">
 </style>
</head>
<body>
 <div></div>
</body>
</html>

Having done so, set its width and height (so it has dimensions), its background color (so we can see it) and its transition property.

<style type="text/css">
body > div
{
 width:483px;
 height:298px;
 background:#676470;
 transition:all 0.3s ease;
}
</style>

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…

If you'd like to follow along you can download the demo files here.

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:

.grow:hover
{
 -webkit-transform: scale(1.3);
 -ms-transform: scale(1.3);
 transform: scale(1.3);
}

Shrinking an element is as simple as growing it. To enlarge an element we specify a value greater than 1, to shrink it, we specify a value less than 1:

.shrink:hover
{
 -webkit-transform: scale(0.8);
 -ms-transform: scale(0.8);
 transform: scale(0.8);
}

4. Rotate elements

CSS transforms have a number of different uses, and one of the best is transforming the rotation of an element. Give your div the class “rotate” and add the following to your CSS:

.rotate:hover
{
 -webkit-transform: rotateZ(-30deg);
 -ms-transform: rotateZ(-30deg);
 transform: rotateZ(-30deg);
}

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:

.threed:hover
{
 box-shadow:
 1px 1px #53a7ea,
 2px 2px #53a7ea,
 3px 3px #53a7ea;
 -webkit-transform: translateX(-3px);
 transform: translateX(-3px);
}

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).

@-webkit-keyframes swing
{
 15%
 {
 -webkit-transform: translateX(5px);
 transform: translateX(5px);
 }
 30%
 {
 -webkit-transform: translateX(-5px);
 transform: translateX(-5px);
 } 
 50%
 {
 -webkit-transform: translateX(3px);
 transform: translateX(3px);
 }
 65%
 {
 -webkit-transform: translateX(-3px);
 transform: translateX(-3px);
 }
 80%
 {
 -webkit-transform: translateX(2px);
 transform: translateX(2px);
 }
 100%
 {
 -webkit-transform: translateX(0);
 transform: translateX(0);
 }
}
@keyframes swing
{
 15%
 {
 -webkit-transform: translateX(5px);
 transform: translateX(5px);
 }
 30%
 {
 -webkit-transform: translateX(-5px);
 transform: translateX(-5px);
 }
 50%
 {
 -webkit-transform: translateX(3px);
 transform: translateX(3px);
 }
 65%
 {
 -webkit-transform: translateX(-3px);
 transform: translateX(-3px);
 }
 80%
 {
 -webkit-transform: translateX(2px);
 transform: translateX(2px);
 }
 100%
 {
 -webkit-transform: translateX(0);
 transform: translateX(0);
 }
}

This animation simply moves the element left and right, now all we need to do is apply it:

.swing:hover
{
 -webkit-animation: swing 1s ease;
 animation: swing 1s ease;
 -webkit-animation-iteration-count: 1;
 animation-iteration-count: 1;
}

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:

.border:hover
{
 box-shadow: inset 0 0 0 25px #53a7ea;
}

Featured image/thumbnail, animation image via Shutterstock.

Sara Vieira

Sara Vieira is a freelance Web Designer and Developer with a passion for HTML5/CSS3 and jQuery. You can follow her on twitter or check out her website.

Read Next

24 Best Creative Portfolio Websites in 2023

For anyone working in a digital creative field, whether design, illustration, animation, video, or a combination of…

15 Best New Fonts, September 2023

Nothing upgrades your designs like selecting the right font. It’s all too easy to fall into the trap of using the same…

Weekly Design News #1

Every Sunday we’re rounding up the best of the previous week’s stories from webdesignernews.com, and in this issue #1,…

The 20 Most Controversial Logos of All Time (Ranked)

When you hire graphic designers to create your company's logo, what do you expect? Professional designs, culturally…

LimeWire AI Studio Generative Art App

If you’re looking for the most exciting way to launch a career in AI-generated art, then you’re in the right place.

20 Best New Websites, September 2023

Are you in need of design inspiration? Are you looking for the best websites designed in 2023 to pull ideas,…

The Dangers of Deceptive Design Patterns (And How to Avoid Them)

As web designers, our role in crafting user-friendly digital landscapes is critical. We are tasked with creating user…

10 Best Ecommerce WordPress Themes in 2023 [September update]

You plan to set up shop with an online store. You know there’ll be competition. And to compete with or beat that…

5 Marketing Tools Every Designer Needs

Yes, designers do need marketing tools. From freelance graphic designers who need to land more work to designers who…

Exciting New Tools For Designers, September 2023

At the end of another summer, we are all getting ready to knuckle down for some serious work in the fall. But we want…

Elon Musk calls LinkedIn ‘Cringe’—Announces Competitor

Elon Musk recently announced his intentions to create a direct competitor to LinkedIn. Musk’s grand plan is to make his…

Everything You Need to Know to Embrace the Y2K Design Trend

The turn of the millennium was a major cultural shift, and the Y2K aesthetic emerged as a visualization of what the…