CSS transitions with delay & 3D transforms for WebKit

CSS3 experiment for WebKit

Have you seen those “meta info” sections that are often under blog posts? All sorts of info about the author, a permalink and something about the post categories… I thought it would be cool to put that into a small “info” button instead of always displaying the whole lot.

This is a pure CSS/HTML version of what can easily be turned into a cross browser info button using JS, images and some CSS.

Check out the cool transition effect when you hover over the info button on the lower right corner!

The main work for the animation is done by the following CSS:

details {
-webkit-perspective: 100; /*for 3D transform*/
}

/*info header*/

details summary {
-webkit-transition-property: width margin-left;
-webkit-transition-duration: 0.2s;
-webkit-transition-timing-function: ease-in-out;
-webkit-transition-delay: 0.3s;
}

/*info header hover*/

details:hover summary {
-webkit-transition-delay: 0s;
}

/*info body */

details address {
-webkit-transition-property: -webkit-transform opacity;
-webkit-animation-timing-function: ease-in-out;
-webkit-transition-duration: 0.3s;
-webkit-transition-delay: 0s;
-webkit-transform: rotateX(85deg);
-webkit-transform-origin: 100% 100%;
}

details:hover address {
-webkit-transform: rotateX(0deg);
-webkit-transition-delay: 0.2s;
}

Have a look at the source to find out more about how it’s done and feel free to tweak it or use it.

A note for mobile browsers (iPhone/iPad/iPod Touch): The hover event is not supported by the touch interface. To use this for the mobile Safari browsers, you’ll have to start the CSS transitions using JavaScript.

BTW: this is only for WebKit and tested in Safari 4 on Mac. It’s work in progress and not meant to be the 100% optimized and tested solution.

Advertisements

Published by

attilaacs

I've always been interested in all kinds of art because I felt the need to express myself in many different ways. I paint, draw, create 3D models, motion graphics & designs of all sorts, play guitar, love photography and whatever else is in between... I was born in Hungary and lived in Hungary, Germany, Australia and the UK for a number of years. I speak German, English and a little Hungarian (I'm working on improving that one again!).

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s