动画css反射

Question

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

请参阅此jsfiddle以获取我的代码：http://jsfiddle.net/2rmmU/

仅供参考，因此您需要使用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更适合的东西吗？这是我对替代方案的建议。