I’ve been playing with Webkit transitions for quite sometime and so far I’m really impressed with what it can do. Animations and effects that I thought was only possible with jQuery is now possible with CSS and webkit.

Webkit is impressive. I’ve been tinkering with Google Chrome and Safari 4, the main browsers that use the Webkit rendering engine, and all I can say is they’re both fast and real good browsers. What I thought was only possible with a few Javascript snippets is now possible with webkit. In this post, I will show you demonstration and examples of what Webkit and CSS can do.
The animation effects will only be viewable on Google Chrome and Safari 4+
Image Shrink Effect
The image will shrink if you put your mouse pointer on top of it. It is achieved by using the -webkit-transform:scale(value) property.
The HTML
<div id="demo-1" class="demobox"> <img src="optimusprime.jpg"/> </div>
The CSS
#demo-1 img {
-webkit-transform: scale(1);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
#demo-1 img:hover{
-webkit-transform: scale(.5);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
Notice how the HTML looks very simple. It’s just a simple <img/> tag but with webkit, you can achieve a very cool effect.
Fade Out Image Effect
On mouse hover, the image will fade out to 50% opacity smoothly.
The HTML
<div id="demo-2"> <img src="optimusprime.jpg"/> </div>
The CSS
#demo-2 img {
opacity: 1;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
#demo-2 img:hover{
opacity: .5;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
Fade in Description Box Effect
When you hover your mouse over the image, a box will fade in smoothly with its title and description.
The HTML
<div id="demo-3"> <img src="optimusprime.jpg"/> <div> <h3>Transformers</h3> <p>More than meets the eye</p> </div> </div>
The CSS
#demo-3{position:relative;}
#demo-3 img{
opacity:1
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
#demo-3 .details{
position:absolute;
top:0;
left:0;
opacity: 0;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
#demo-3 .details:hover{
opacity: .9;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
Image Slide Out Effect
The image is above the description box and when the mouse is hovered over the image, it will slide out revealing the description box.
The HTML
<div id="demo-4"> <img src="optimusprime.jpg"/> <div> <h3>Transformers</h3> <p>More than meets the eye</p> </div> </div>
The CSS
#demo-4{position:relative;}
#demo-4 img{
position:absolute;
top:0;
left:0;
-webkit-transition: margin-left;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#demo-4:hover img{
margin-left:200px;
}
#demo-4 .details{
position:absolute;
top:0;
left:0;
z-index:-1;
}
Slide In Box Effect
The description box will slide in on top of the image on mouse hover.
The HTML
<div id="demo-5"> <img src="optimusprime.jpg"/> <div> <h3>Transformers</h3> <p>More than meets the eye</p> </div> </div>
The CSS
#demo-5{position:relative;}
#demo-5 .details{
opacity: .9;
position:absolute;
top:0;
left:0;
margin-left:-200px;
-webkit-transition: margin-left;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#demo-5:hover .details{
margin-left:0;
}
Zoom in Box Effect
The description box will zoom out from the middle of the image when the image is triggered by mouse hover.
The HTML
<div id="demo-5"> <img src="optimusprime.jpg"/> <div> <h3>Transformers</h3> <p>More than meets the eye</p> </div> </div>
The CSS
#demo-6{
position:relative;
}
#demo-6 img{
position:absolute;
top:0;
left:0;
z-index:0;
}
#demo-6 .details{
opacity: .9;
position:absolute;
top:100;
left:150;
z-index:999;
-webkit-transform: scale(0);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
}
#demo-6:hover .details{
-webkit-transform: scale(1);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
}
These examples are just a few things the Webkit engine can do. The question now is, can we use these on real world projects? Why, of course. We might just need a little work for browsers that doesn’t support these awesome transition effects.
The animation effects will only be viewable on Google Chrome and Safari 4+
Here are some good resources and articles that you might want to check out:
Tags: css, CSS3, Hover Effects, Image Effects, Webkit
September 22nd, 2009
at 10:02 am
Nice demo. Too bad only webkit would support these kind of awesome animation effects.
September 27th, 2009
at 3:52 am
Great stuff. Thanks.
September 27th, 2009
at 3:55 am
Now I will have to figure out how to do the transition in the onclick of a link to transition to a div of text. I guess it would take changing the class of the link?
September 27th, 2009
at 6:32 pm
Nice example. How can i show an image on hover and active?
October 21st, 2009
at 10:57 pm
there’s a little mistake in demo5…
the inner div needs to have the class=”details”
so that it looks like this:
Transformers
More than meets the eye
but thanks a lot for the examples they are pretty nice
October 21st, 2009
at 10:59 pm
oh sorry, havent thought about, that this box is able to read html ;)
next try.. :
Transformers
More than meets the eye
December 23rd, 2009
at 8:56 am
You shouldn’t put HTML directly into this box. Instead try converting your code snippet into a friendly readable text here: http://www.elliotswan.com/postable/
January 4th, 2010
at 5:17 pm
impressive
January 5th, 2010
at 8:52 pm
Hey, this is cool! Wonder when all these features will be implemented in all major web browsers…
February 10th, 2010
at 6:11 pm
Nice effects indeed . Webkit based browser are great and designing for them is a pleasure.
Thank you for these examples !
February 17th, 2010
at 11:52 am
Awesome efects with CSS3, now javascript isn’t necessary, hihi ;D