animation

Okay, this is a little bit of a lie, but only sort of…

There are some crazy things you can do with transitions and transforms, but the really crazy stuff, unless you’re working on a WebKit-only project,
is kind of out of reach for cross-browser projects. Although all the other major players are lagging behind Safari, Chrome*, Firefox, Opera, and even IE9 each have their own vendor prefixes and are working on it:

(* Although Chrome uses WebKit, just like Safari, Chrome incorporate various WebKit features at a different pace than Safari, so you cannot assume both will have the same support.)

So, again, it’s coming, really, but if we start with fairly simple animations, nothing breaks for those without support, and those with just get a little nicer experience.

The transitions I’d like to talk about aren’t very crazy at all, but they can really “take the edge off” of some every day actions for the browsers that can handle it,
and for browsers that can’t, users are no worse than they are right now (you know, that progressive enhancement thing).

This first one is just a link hover. Rather than the current “abrupt” from one color to another, you can easily apply a transition that will ease from one color to the other:

#example1 a {
	/* the initial color should be blue */
	color: blue;
	/* what should get the transition (just "color" here), how long the transition should take to complete (1/2 second), and the transition effect (linear) */
	-webkit-transition: color 0.5s linear; /* Safari and Chrome */
	-moz-transition: color 0.5s linear; /* Firefox 4+ */
	-ms-transition: color 0.5s linear; /* IE10+ */
	-o-transition: color 0.5s linear; /* Opera */
	transition: color 0.5s linear; /* W3C */
}
#example1 a:hover {
	/* the hover color should be red */
	color: red;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Here we again apply a hover transition that, if not supported, will act exactly as it always has, but for those with support, they get a better transition:

#example2 a {
	/* the initial styles */
	padding: 4px 8px;
	background: #ccc;
	border: 2px solid #333;
	color: #000;
	/* what should effects get the transition ("all", here), how long the transition should take to complete (1/4 second), and the transition effect (ease-in)*/
	-webkit-transition: all 0.25s ease-in; /* Safari and Chrome */
	-moz-transition: all 0.25s ease-in; /* Firefox 4+ */
	-ms-transition: all 0.25s ease-in; /* IE10+ */
	-o-transition: all 0.25s ease-in; /* Opera */
	transition: all 0.25s ease-in; /* W3C */
}
#example2 a:hover {
	/* set the hover styles */
	background: #333;
	border: 2px solid #000;
	color: #eee;
}

And here we apply yet another hover transition, borrowed from People.com:

<div id="example3">
	<a href="#">
		<img width="150" height="113" border="0" alt="Fergie Puts on Her Judge's Hat for 'Avon Voices' | Fergie" src="http://img2.timeinc.net/people/i/2010/video/101213/fergie-150.jpg" />
	</a>
</div>
<style>
#example3 div {border: 0;}
#example3 a {
	/* give the link some base styles */
	display: block;
	width: 150px;
	height: 113px;
	background: #333 url("http://img2.timeinc.net/people/static/i/video/bgPlayVideo.png") no-repeat 50% 50%;
}
#example3 img {
	/* the initial opacity */
	opacity: 1;
	/* what should effects get the transition (just "opacity" here), how long the transition should take to complete (1/2 second), and the transition effect (ease-out) */
	-webkit-transition: opacity 0.5s ease-out; /* Safari and Chrome */
	-moz-transition: opacity 0.5s ease-out; /* Firefox 4+ */
	-ms-transition: opacity 0.5s ease-out; /* IE10+ */
	-o-transition: opacity 0.5s ease-out; /* Opera */
	transition: opacity 0.5s ease-out; /* W3C */
}
html.lte8 #example3 img {
	/* and even though IE6-8 won't get the transition, we still want it to get the opacity change... */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	zoom: 1; /* 'hasLayout' required for HTC method */
}
#example3 a:hover img {
	/* so on hover, we fade the actual image, so you can see the background image ("Play Video") peaking through */
	opacity: .3;
}
html.lte8 #example3 a:hover img {
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
}
</style>
Fergie Puts on Her Judge's Hat for 'Avon Voices' | Fergie

Leave a Reply

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