Going nuts with CSS transitions

admin    CSS, Photos     css3, howto, image, tutorial, webkit

This article is going to show you how CSS 3 transforms and WebKit transitions can add zing to the way you present images on your site. You’ll see it’s so easy to handle the image effects with only writing lines of CSS words, no javascripts, no coding. just it is!

Related properties include:

• -webkit-box-shadow
• -moz-box-shadow
• box-shadow

• -webkit-transform
• -moz-transform
• transform

• -webkit-transition

Read the original article here.

Note with the hovering examples that the animation will reverse itself when the mouse moves out of the div. Any time the property changes value, the animation will simply start again with the current position as the from value and the new value as the destination. The transition properties of the source state are used to figure out how to animate to the new target state. read more