In any modern website designs, you can find that CSS3 is used. CSS3 Save a lot of time when developing and it is also plays a role for reducing page loads. Thus, the web becomes faster & responsive. Designers are now experimenting with new possibilities of CSS3. Before going to the advanced level, let’s create some basic CSS3 transition and animation tutorial for those who don’t know about it.

CSS3 Transition

Transition means the process or a period of changing from one state or condition to another. Previously, these kinds of transitions were doing through JavaScript (JQuery).

Your First Transition

Change the color of a Div on hover with CSS3 Transition

div {
background-color: green; /* Normal color */
transition: background-color 0.5s ease;  /*CSS3 Hook: Telling which property is going to change, duration, effect */
}
div:hover {
background-color: yellow; /* Color on hover */
}

You may need to add vendor prefixes to support older browsers

-webkit-transition: background-color 0.5s ease;
-moz-transition: background-color 0.5s ease;
-o-transition: background-color 0.5s ease;

See the Pen CSS3 Transition Ex:01 by Surjith (@surjithctly) on CodePen

Transition Properties

transition : A shorthand property for setting the four transition properties into a single property
transition-property : Specifies the name of the CSS property to which the transition is applied
transition-duration : Defines the length of time that a transition takes.
transition-timing-function : Describes how the speed during a transition will be calculated. Default “ease”
transition-delay : Defines when the transition will start

Change Multiple Properties with CSS3

Let’s change multiple properties using CSS3 transition. For that, you should use “All”

transition: all 0.5s ease;

See the Pen Multiple CSS3 Transition Ex:02 by Surjith (@surjithctly) on CodePen

Move Objects with CSS3 Animation

Let’s move an object from one place to another using CSS3 Animation.

.myDiv{

/*Define Animation*/

animation: fadein 2s;
-moz-animation: fadein 2s;
-webkit-animation: fadein 2s;
-o-animation: fadein 2s;}

The Animation

@keyframes fadein {
from {
opacity:0;
-webkit-transform: translateY(-50px);
-moz-transform: translateY(-50px);
transform: translateY(-50px);
}
to
{
opacity:1;
-webkit-transform:translateY(0);
-moz-transform:translateY(0);
transform:translateY(0);
}
}

See the Pen CSS3 Animation Ex01 by Surjith (@surjithctly) on CodePen

Expanding textbox when Focus with CSS3

You may see this effect in most recent sites. You can do it in a simple way.

input[type=text] { 
width:100px; 
-webkit-transition: all 0.5s ease; 
-moz-transition: all 0.5s ease; 
-o-transition: all 0.5s ease; 
transition: all 0.5s ease; 
} 
input[type=text]:focus { 
width:200px; 
}

See the Pen Expanding Textbox by Surjith (@surjithctly) on CodePen

Hope you got the basics. You can do many things with CSS3. This is just basic. You can find more articles soon. Subscribe to our newsletter for Updates.