CSS3 transition effect tips for better animation

CSS3 is the easy way to create animations,but most of us do not know the tricks to create more advance transition effects from it.Mostly I've observed that the transitions are simple while W3C has developed far more better scripting language to workout.

CSS3 can create impressive animation,instead of using Jquery you can use CSS3 for it,however many of us still not aware about its advance functionalities.So lets begin.

Basic

To create a transition we follow the following structure.

[TARGET] [TIME] [EFFECT] [DELAY(if it is)]

To make it more clear see the example below.

transition:background 1s linear 2s;
-o-transition:background 1s linear 2s;
-webkit-transition:background 1s linear 2s;
-moz-transition:background 1s linear 2s;

In above examples I've added background on target,if you want to change all properties then you can write all instead of background.In the place of time I've added 1s means 1 second and you can use the value in decimal or in millisecond.Just write 200ms instead of 1s.In place of delay I've added 2s or you can use ms for millisecond or you if you do not write anything in place of delay,then there will be not delay in transition effect.In the place of effect I've chosen linear,it means that the transition will occur at same speed at all stages.But there are a few transition effects for basic stages that are,

linear:Same speed during whole transition.
ease-in:Slow at first but ends faster.
ease-out:Fast start but slow ending.
ease-in-out:Starts slow and ends also slow,but fast at middle of transition.

To get more idea about it,check out the example below.

Hover Me,the time has been set to 3 second to all of them.

linear

ease-in

ease-in-out

ease-out

Okay,that was the basic transition effects example that I've should.Now lets move to some advance.

Different effect in one transition

What about if you want different effect at mouse enter and different at mouse out.Okay if you want a transition you add the transition script in the CSS of element like this.

#example
{
transition:background 1s linear;
-o-transition:background 1s linear;
-webkit-transition:background 1s linear;
-moz-transition:background 1s linear;
background:#333;
}
#example:hover
{
background:#fff;
}

The above script will do the transition of background in 1 second after a delay of 2 second in a linear effect,in both mouse enter and mouse out.But if you add the transition like this then the condition will be changed.

#example
{
transition:background 1s linear;
-o-transition:background 1s linear;
-webkit-transition:background 1s linear;
-moz-transition:background 1s linear;
background:#333;
}
#example:hover
{
background:#fff;
transition:background 3s linear;
-o-transition:background 3s linear;
-webkit-transition:background 3s linear;
-moz-transition:background 3s linear;
}

The above transition effect will do the the transition in 1 second on mouse enter but it takes 3 second when the mouse out,for better clear the idea,take a look at below example.

Hover Me

Same On Both

Different in Both

This is a example,but you can change anything in both condition,so you will get a better effect according to your desire.

`cubic-bezier`

cubic-bezier,it is also a transition effect that I didn't mention in above example,because I think it is a bit bigger level.This transition helps you to create your custom transition easing.The structure use to create is,

cubic-bezier(n,.n,.n,n)

In above line in replace of every n you can use a number from 0 to 1.For example check the transition effect below.

HOVER ME
CODE
transition:all 1s cubic-bezier(.75,.63,0,.27);
-o-transition:all 1s cubic-bezier(.75,.63,0,.27);
-webkit-transition:all 1s cubic-bezier(.75,.63,0,.27);
-moz-transition:all 1s cubic-bezier(.75,.63,0,.27);

Check it Out

To create a cubic-bezier transition you can go to cubic-bezier.com.

CSS3 keyframes rule

CSS3 keyframes help to create a transition to infinite and also help to make a transition in a more sequenced way.To get a more clear view of it,check the example below.

It is easy to create and yes it creates amazing transitions.First create a keyframes and then insert them into your element CSS.The structure use to create a keyframe is,

@keyframes animationname {keyframes-selector {css-styles;}}

Then to insert it into element the following structure uses,

animation:animationname time number-of-times;

time:Time takes to complete the whole transition.
number-of-times:it is the count of the transition will occur.It could be any number or use infinite for unlimited times.
animationname:with the name you used to create key frames.

Example

#bloggerever
{
width:100px;
background:#ff8c77;
height:100px;
position:relative;
animation:example 5s infinite;
-webkit-animation:example 5s infinite; /* Safari and Chrome */
}
@keyframes example
{
0% {margin-left:10px;}
100% {margin-left:50%;}
}
@-webkit-keyframes example /* Safari and Chrome */
{
0% {margin-left:10px;}
100% {margin-left:50%;}
}