анимация отражения CSS

Question

Я рисую иконку и нахожу в CSS состояние наведения, которое воспроизводит анимацию webkit, чтобы заставить иконку подпрыгивать. Я хочу, чтобы отражение отражалось в обратном направлении, чтобы оно оставалось на земле, а не следовало за иконкой, однако свойство отражения не будет анимироваться. Что-то не так или есть альтернатива? Я хотел бы избежать, если возможно, добавления элементов для достижения этой цели.

Пожалуйста, посмотрите этот jsfiddle для моего кода: http://jsfiddle.net/2rmmU/

К вашему сведению, здесь используется отражение веб-набора, поэтому для его просмотра вам понадобится браузер.

Answer 1

Разве это не то, для чего HTML5 Canvas лучше подходит? Это было бы моим предложением для альтернативы.

Answer 2

Кажется, что -webkit-box-reflect не очень устойчиво и не может быть анимировано.

Однако вы можете добиться эффекта, который ищете, используя псевдоэлементы.

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

Демо

Теперь снова отобразите svg, переверните его и примените маску градиента .