CSS3 Transitions : The Basics

JavaScript libraries, such as jQuery, make easy work of animations and effects when working with websites. They allow you to move, change and fade different DOM elements in your web page, which can improve your website visually and sometimes make it more usable. There are, however, disadvantages to using jQuery, for example, most modern web browsers have the ability to turn JavaScript off and Firefox has a popular addons called ‘NoScript‘ which will also disable JavaScript – and your effects too. CSS, with version three of its specification, has CSS transitions which allow you to do very similar animations and effects as jQuery.

At the moment CSS transitions are supported by FF4+ (with Prefix), Chrome (with Prefix), IE10 (with Prefix) & Opera 10.5+ (with Prefix).

style.css

a
{
	-webkit-transition: all 0.6s ease-out;
	-moz-transition: all 0.6s ease-out;
	-ms-transition: all 0.6s ease-out;
	-o-transition: all 0.6s ease-out;
	transition: all 0.6s ease-out;  
}

Demo

Hover Over Me!{#example}

#example
{
	display: inline-block;
 	margin-top: 16px;
	padding: 6px 10px 6px 0;
 	font: 18px Georgia, serif;
	-webkit-transition: all 0.6s ease-out;
	-moz-transition: all 0.6s ease-out;
	-ms-transition: all 0.6s ease-out;
	-o-transition: all 0.6s ease-out;
	transition: all 0.6s ease-out;
}

#example:hover
{
	padding-left: 200px;
	background-color: #333;
	text-shadow: 0 0 4px #000;
	border-radius: 16px;
	color: #FFF;
	font-style: italic;
}

For more information on CSS transitions I would recommend reading ‘CSS3 Transitions‘ on Net|tuts+ and ‘Connecting The Dots‘ by Smashing Magazine.

[Photo Source]