CSS reflection animation

Question

I draw an icon and have a freeze state in css that plays webkit animations to roll the icon back. I want the reflection to be reflected back, so that it stays on the ground, not after the icon, however, the reflection property does not enliven. Is something wrong or is there an alternative? I would like to avoid, if possible, adding elements to achieve this.

Please see this jsfiddle for my code: http://jsfiddle.net/2rmmU/

FYI uses webkit reflection, so you need a webkit browser to view it.

Answer 1

It seems that -webkit-box-reflect not very reliable and cannot be animated.

However, you can achieve the effect you are looking for using pseudo-elements.

 #twitter_logo:after{ content:''; height:50px; width:50px; position:absolute; top:54px; left:0; } 

Demo

Now display svg again, flip it and apply a gradient mask .

Answer 2

Isn't that what works best for HTML5 canvas? This would be my suggestion for an alternative.