CSS3 Transitions : The Basics

• 0Comments
• The Author
• Information

Edd Turtle

Software Engineering Student & Self-taught Front-end Web Developer. Lover of coffee, exploring and climbing.

Can be found @eddturtle.

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

#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]

  Recent Articles

Blur a Background Image (with help from blur.js)

Recently, in a very small project of mine, I wanted to create a full-size image as the background and to blur it a little to create an abstract but interesting backing image. Initially, we...

View Full Post →

Showing your E-mail Online

We all know about spam and up until recently there wasn't an e-mail address shown on this blog (just a contact form) for this very reason. Most of us have also tried different methods of s...

View Full Post →