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.