CSSの反射アニメーション

Question

私はアイコンを描画し、アイコンをバウンスさせるためのWebkitアニメーションを再生するCSSにホバー状態を持っています。私は反射が跳ね返って、アイコンに従うのではなく、地面に置かれるようにしますが、反射特性はアニメートされません。間違っているのですか、それとも代替手段がありますか？私は可能な限りこれを達成するための要素を追加することを避けたいと思います。

私のコードのために、この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

、再びflip itをSVGを表示し、gradient maskを適用します。

Answer 2

これはHTML5キャンバスに適していますか？これは代替案に対する私の提案です。