Implement Windows 8 Tile “Click” animation with css3

Question

If you see the video over here: http://msdn.microsoft.com/en-us/library/windows/apps/br212680.aspx , you will notice that the 2nd tile scales down immediately, stays scaled-down for few milliseconds then comes up to normal state.

I tried to mimic this behaviour by reducing the width and height by 2px on :active and gave background-size: cover . But I am not able to create the delay in scaling back to normal with this approach.

This should be possible with CSS3 animations but I am not able to map out an approach. Can anyone give me a direction to go from here?

EDIT: Here's a jsfiddle of what I have tried: http://jsfiddle.net/p3Wbh/

** EDIT: **: Updated the jsfiddle: http://jsfiddle.net/p3Wbh/1/ with jQuery implementation for the "held down" effect. Looking for a way to do this in css3.

Answer 1

Since you are looking for javascript / winJS I can explain it ... but the css3 property I don't know about that ..

Pleas ego through the Gestures link Gestures

Here use 1 -> MSPointerDown 2 -> MSPointerUp 3 -> MSPointerOver 4 -> MSPointerOut

Animate your tile by setting css properties in these events .. :) I hope this works for you .....

Like in pointer down add the css you wrote for that pressed look and in pointer up or move add the animation + css for unpressed look ...

Hope the suggestion helps :)