jquery - IE10: Pseudo-Elements - アニメーションを複数回再生できない

Question

HTML

<div></div>

CSS

div:before {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    background-color: #000;
}

div.skew:before {
    -webkit-animation: skew 1s linear;
    -moz-animation:    skew 1s linear;
    animation:         skew 1s linear;
}

@-webkit-keyframes skew {
    0%   { -webkit-transform: skew(0deg); }
    100% { -webkit-transform: skew(50deg); }
}

@-moz-keyframes skew {
    0%   { -moz-transform: skew(0deg); }
    100% { -moz-transform: skew(50deg); }
}

@keyframes skew {
    0%   { -webkit-transform: skew(0deg);  transform: skew(0deg); }
    100% { -webkit-transform: skew(50deg); transform: skew(50deg); }
}

jQuery (ホバー時にアニメーションをトリガーする.skewクラスを追加します)div

$("div").bind("animationend webkitAnimationEnd oAnimationEnd", function(){
  $(this).removeClass("skew");  
});

$("div").mouseenter(function(){
    $(this).addClass("skew");
});

こちらをご覧ください(Internet Explorer 10) http://jsfiddle.net/uDddG/

Chrome と Firefox では正常に動作しますが、IE10 では、:before または :after 疑似要素にある場合、アニメーションは 1 回しかトリガーできません。に問題があるのではないかと思ったのですがanimationend、疑似要素以外では問題なく動作します。ここで何が問題なのですか？

- -編集 - -

jQueryを使用してdivをホバーしたときに.skewクラスを追加する代わりに、問題は上記のjQueryに関連している可能性があると思いdiv:hover:beforeますdiv.skew:before。これを参照してください: http://jsfiddle.net/yaBWa/。

ただし、再生中に div が動かなくなった場合に備えてアニメーションを終了する必要があるため、 .skew クラスを追加する:hover代わりに使用.mouseenterしてアニメーションをトリガーすることはできません。