For more CSS3 Transition demos, please go to this article from my blog.
.container {
text-align: center;
padding: 10px;
margin: 10px;
background: #f9f9f9;
}
.container .letters {
text-decoration: none;
font-weight: bold;
line-height: 100px;
}
.container .letters span {
-moz-transition-duration: 1.5s;
-webkit-transition-duration: 1.5s;
-o-transition-duration: 1.5s;
font-size: 50px;
}
.container .letters span:hover {
font-size: 100px;
}
.container .letters span.green {
color: #547659;
text-shadow: 1px 1px 2px #8FC1A5;
}
.container .letters span.green:hover {
color: #315637;
text-shadow: 5px 5px 5px #99ADA2;
}
.container .letters span.red {
color: #874031;
text-shadow: 1px 1px 2px #C1998F;
}
.container .letters span.red:hover {
color: #723B2F;
text-shadow: 5px 5px 5px #B4A09B;
}
.container .letters span.blue {
color: #314A87;
text-shadow: 1px 1px 2px #8F9AC1;
}
.container .letters span.blue:hover {
color: #2F3F72;
text-shadow: 5px 5px 5px #9B9FB4;
}