CSS3 Transition Property – How To Make Simple Animations

CSS3′s transition is a great way to add a variety of animations to sites without dependency on JavaScript and Jquery.

It can be used to create smooth effects of various kinds.

CSS3 Transition Property - How To Make Simple Animations

Browser Support

browser-support-table

Note: IE9 and lower versions do not support the transition property.

Let’s understand the syntax of transition property

transition: transition-property 
transition-duration  
transition-timing-function  
transition-delay;

1. Transition-property

The transition-property describes the type of effect to create. For instance width, height, color and many more.

transition-property: none | all | property

Note:

1. As the name says if none keyword is specified, no property will undergo a transition.
2. If the all keyword is specified, every property that is capable of supporting transitions will perform transition.
3. If name of property or properties is specified then those particular properties will perform transition.

2. Transition-duration

We need to define the duration of the transition that’s where we use this particular property.

transition-duration: time

Note:

1. It can be specified in seconds or milliseconds.

3. Transition-timing-function

We have different functions named as ease, ease-in, ease-out, ease-in-out and even cubic-bezier to change the speed curve.

transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out

4. Transition-delay

Finally, transition-delay property creates a pause before the transition effect starts.

transition-delay: time

Note:

1. It’s completely an optional property.
2. It can be specified in seconds or milliseconds.

To better understand let’s take a look at the examples below.

Let’s write some code:

Tip: Transition effect shows on hovering an element.

Html to use:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Transition</title>
</head>
<body>
<div class="box">&nbsp;</div>
</body>
</html>

CSS to use:


.box { transition-property:width;
transition-timing-function:ease-in-out;
transition-duration:0.5s; 
width:200px; 
height:200px; 
background:orange;
}

.box:hover { width:550px; }

Result

Place mouse on box

Transition Multiple Properties

Html to use:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Multiple Transition</title>
</head>
<body>
<div class="box">&nbsp;</div>
</body>
</html>

CSS to use:


.box {
transition-property: width,border,background,;
transition-timing-function:ease-in-out;
transition-duration: 1s;
width:250px;
border:0 solid #333333;
background:grey;
}

.box:hover {
width:550px;
border:10px solid #666666;
background:orange;
}

Result

Place mouse on box

How to support other browsers

Other modern browsers have their own implementations as well. Here is the code for different types of browsers.

transition-property:width;
-moz-transition-property: width; /* Firefox 4 */
-webkit-transition-property:width; /* Safari and Chrome */
-o-transition-property:width; /* Opera */

Final Words

This is just basic introduction. A lot more complex animations are being made today. You can experiment create your own and share with all.

Please share your thoughts and experience…

Reference Websites

– 50 Awesome Animations made with CSS3

– 15 stunning examples of CSS3 animation

– 50 Awesome Animations made with CSS3

 

Written by Nikhil Malhotra


Hi! I am Nikhil Malhotra, a Web/UI designer and Front End developer. This is the area of my website where I share my knowledge in form of tutorials and articles.

 
This entry was posted in Tutorials and tagged , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *