动画css反射

Question

我画了一个图标，并在CSS中悬停状态，播放webkit动画，使图标反弹。我希望反射反过来反射，以便它保持放置在地面而不是跟随图标，但是反射属性不会生成动画。有什么不对或有其他选择吗？如果可能的话，我想避免添加元素来实现这一点。

请参见本的jsfiddle我的代码：http://jsfiddle.net/2rmmU/

FYI本采用了WebKit的反射，因此你需要一个WebKit浏览器才能看到它。

Answer 1

它似乎是-webkit-box-reflect不是很健壮，不能动画。

但是，您可以使用伪元素实现您正在寻找的效果。

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

Demo

现在，再次显示SVG，flip it，并应用gradient mask。

Answer 2

这不是HTML5 Canvas更适合的吗？这将是我的替代选择。