Animations not working on pseudo-elements? IE10

Question

This is a problem for IE10 in particular. I'm animating a pseudo-element. When I hover the pseudo-element, .skew class is added to it, which triggers the CSS animation. When the animation is finished, animationend removes that .skew class.

At least that's what happens in Chrome and Firefox, but in IE10 the .skew class is added, but not removed when the animation is finished. I'm not exactly sure if that's the case, but it might be because hovering the pseudo-element the first time triggers the animation, but hovering it again doesn't (which would mean the .skew class wasn't removed at the end of the previous animation).

See Here: http://jsfiddle.net/Ldh5g/

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

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

Anytime the pseudo-element is hovered, the animation plays. This is true for Chrome and Firefox. But in IE10 the animation can't play more than once. The thing is if I try this on a non-pseudo-element, it works. Why?

Answer 1

I modify your code with a toggle event. I haven't tried it but it should work even on IE10

http://jsfiddle.net/Ldh5g/4/

JS

$( "div" ).bind( "mouseenter mouseleave", function() {
  $( this ).toggleClass("skew");
});

Answer 2

ie10尚不支持伪元素上的动画事件（冒泡）。