CSS3 Animation – Stylish Links and other HTML elements

Links, Links, Links!! That’s what we have all over the internet. On our website and blog posts, we have a lot of links to point a user to another page. Today I will share a small trick to stylize the links with CSS3 Animation. That’s what I’ve used on this website and you can apply the same as well to change the link color with style on hover.

CSS3 Animation

With CSS3 animation, we can add some effects when changing from one style to another without using any flash or javascript. We will use CSS animation transition to add some cool effects to the anchor tags.

How it works

CSS3 transition effects let an element gradually change from one style to another. To do this we must specify two things:

Specify the CSS property we want to add an effect too.
Specify the duration of the effect.
Optionally we can specify “transition-timing-function” which is set to “ease” by default however, we can use any of these.

 linear|ease|ease-in|ease-out|ease-in-out

Now let us play with CSS3 Animation transition

HTML Code

<a href="#" title="" > CSS3 Animation - Color </a>
<a href="#" title="" > CSS3 Animation - Background Color </a>
<div > Change Width </div>

CSS Code

.color-animation{
	color: blue;
	-webkit-transition: color 1s ease;
	-moz-transition: color 1s ease;
	-o-transition: color 1s ease;
	-ms-transition: color 1s ease;
	transition: color 1s ease;
}
.color-animation:hover{
	color: red;
	-webkit-transition: color 1s ease;
	-moz-transition: color 1s ease;
	-o-transition: color 1s ease;
	-ms-transition: color 1s ease;
	transition: color 1s ease;
}
.background-animation{
	background: blue !important;
	color: white !important;
	-webkit-transition: background 1s ease;
	-moz-transition: background 1s ease;
	-o-transition: background 1s ease;
	-ms-transition: background 1s ease;
	transition: background 1s ease;
}
.background-animation:hover{
	background: red !important;
	color: white !important;
	-webkit-transition: background 1s ease;
	-moz-transition: background 1s ease;
	-o-transition: background 1s ease;
	-ms-transition: background 1s ease;
	transition: background 1s ease;
}
.change-width{
	width: 150px;
	background: #444;
	color: #fff;
	margin: 20px auto;
	padding: 10px;
	-webkit-transition: width 1s ease;
	-moz-transition: width 1s ease;
	-o-transition: width 1s ease;
	-ms-transition: width 1s ease;
	transition: width 1s ease;
}
.change-width:hover{
	width: 350px;
	-webkit-transition: width 1s ease;
	-moz-transition: width 1s ease;
	-o-transition: width 1s ease;
	-ms-transition: width 1s ease;
	transition: width 1s ease;
}

Try this code on a blank HTML page and add the CSS either within ... tags or in your stylesheet. Play around a bit with the CSS to understand the CSS3 Animation transition and create some cool effects for your website links and other block-level elements. Feel free to discuss this further in the comments.

Website Development Services