CSS Hover Animation Effects – CSS3 Transitions

You can see nice hover animation effects on many websites. When you hover your mouse cursor on an element of web page you can see nice animate hover effect that made using CSS.

Today in this post I am going to tell you how you can give hover effect to an element on HTML web page. It is really going to be so interesting. Isn’t it? Now lets see how you can give nice hover animation effect using CSS.

How you can make hover animation effects using CSS code?

Did you ever heard about CSS3 transition? I am going to tell you about transition which was introduced in CSS3. The CSS3 transitions allows you to change property values of any elements smoothly which will create a nice animation effect. You can use this CSS3 transitions to make nice hover animation effect on web page.

Example of hover animation effect:

Example 1: Increase the width and height of an element with smooth animation on mouse hover:

Now I am going to give you an example where you can see an animation effect when you mouse hover on an element. Here is the CSS code:

#hoveranimation {
    width: 100px;
    height: 100px;
    background: green;
    -webkit-transition: 3s; /* For Safari 3.1 to 6.0 */
    transition: 3s;
}

#hoveranimation:hover {
    width: 300px;
    height: 300px;
}

And here is the HTML code:

<div id="hoveranimation"></div>

That’s it. Now test it with your browser and mouse hover the green box. What will you see? You will see the box is increasing it’s size until its width and height become 300px. It will take 3 seconds to reach height and width 300px from when you mouse hover the element. You can see that i have set the duration 3s (3 seconds) to the property transition. You can set any time.



Is it not interesting? CSS is really so great. Actually this is done by CSS3 transitions with the usual hover effect. You can see that if you don’t use the CSS transitions then the box will increase it’s width and height suddenly instead of increasing width and height smoothly.

 

Example 2: Change the color with smooth animation on mouse hover:

In this tutorial we use the same code like we did in example 1. Only one thing we are going to change. We will just add another background color to the #hoveranimation:hover which is different then green. I am going to give it yellow. Here is the new CSS code:

#hoveranimation {
    width: 100px;
    height: 100px;
    background: green;
    -webkit-transition: 3s; /* For Safari 3.1 to 6.0 */
    transition: 3s;
}

#hoveranimation:hover {
    width: 300px;
    height: 300px;
    background: yellow;
}

now what will you see? You can see that the color also changing smoothly from green to yellow. Is it not so amazing and interesting? What you think?


These was just a basic demo example of CSS animation on mouse hover. I will come in future with lots of advance CSS animation tutorials and demo soon.

Now go and play with CSS3 transitions using your own code. And obviously if you think this post useful then please share it on social media and also share it with your friends.

Leave a Reply

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