CSS3 transition

What is CSS Transition?

CSS Transition is allowing you to animate your HTML element smoothly without using any smoothly animatable frameworks.

Ok then, let’s dive into it.

Basically, there are 4 CSS transition properties available.

  1. transition-property – CSS property name where the transition will be applied. ( allows multiple properties separated with comma).
  2. transition-duration – how long does the transition animation should take to complete.( specify in seconds or milliseconds ).
  3. transition-timing-function – this is for transition animation effects, should it be animate slowly or fast or fast and then slow.
  4. transition-delay – after what time or how long to wait the transition animation starts.

Transition is the shorthand of that 4 properties above.

Syntax:

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

Example :

Suppose, this is your simple HTML structure that you want to animate smoothly.

<div class="box">
<p>this is my box content</p>
</div>

This is my simple HTML structure for creating a box. Now add some CSS to make it look good.

CSS –

.box{
width: 150px;
height: 150px;
background: red;
padding: 5px;
}

this box’s background color is red. Now, you want to change this box’s background color to green when you hover the box.

CSS –

.box:hover{
background: green;
}

now, when you hover the box it will change the background color red to green. but something off means just looks at the changing color behavior, the background is changing suddenly, no smoothness over there.

For that, you have to use some nice and cool animations that work smoothly on every browser (Chrome, Firefox, Safari, Opera, Edge, IE, UCB and anything you know) exist on that planet or another planet also.

So, add the following CSS code into your existing CSS code.

.box:hover{
background: green;
transition: background 0.2s linear;
}

and now when you hover, the background smoothly changes from red to green.

Now, what exactly I do in code, let’s break it down.

  1. transition-property: background ( you can also use “all” for animate all the CSS properties ).
  2. transition-duration: 0.2s (means this animation duration time is 0.2s OR you can use 1s, 2s anything but ONE AT A TIME).
  3. transition-timing-function: linear (means animation steadily start and stop after 0.2s. There are various timing function’s available like – ease, ease-in, ease-in-out, ease-out and cubic-bezier).

So, now the animation works as we expected nice and smoothly after hovering on the div. but when you take the mouse out from the div, the background color not smoothly changes anymore, it will suddenly change to its original color.

To resolve that problem, you have to add the same transition effect on the box class (.box).

CSS –

.box{
width: 150px;
height: 150px;
background: red;
transition: background 0.2s linear;
}

and that’s it. Your done with smooth animation.

Final Code –

HTML - 

<div class="box">
<p>this is my box content</p>
</div>

CSS - 

.box{
width: 150px;
height: 150px;
background: red;
padding: 5px;
transition: background 0.2s linear;
}

.box:hover{
background: green;
transition: background 0.2s linear;
}

Here’s the demo of Transition – Transition Demo


and the transition is supported almost every browser except Opera Mini.

Don’t understand any part or have any question about this transition, feel free to comment down below and I’ll reply as soon as possible.

Leave a Reply

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