1

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 (adds .skew class to div to trigger the animation upon hover)

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

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

SEE HERE (Internet Explorer 10) http://jsfiddle.net/uDddG/

Works fine in Chrome and Firefox, but in IE10 the animation can trigger only once when it's on a :before or :after pseudo-element. I thought it might've been a problem with animationend, but it works fine on non-pseudo-elements. What's wrong here?

---EDIT---

I think the problem might be something related to the jQuery above, instead of using jQuery to add .skew class upon hovering the div, I tried div:hover:before instead of div.skew:before and the animation can trigger any time upon hover. See this: http://jsfiddle.net/yaBWa/.

But I need the animation to finish in case the the div becomes unhovered while it's still playing, so using :hover instead of .mouseenter to add .skew class to trigger the animation isn't an option.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.