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伪元素。我认为它可能是animationend的问题，但它在非伪元素上工作正常。这有什么不对？

--- --- EDIT

我认为问题可能与上面的jQuery有关，而不是在悬停div时使用jQuery添加.skew类，我尝试div:hover:before而不是div.skew:before并且动画可以触发任何悬停时间。见：http://jsfiddle.net/yaBWa/。

但是我需要完成动画，以防div在它仍在播放时被取消，所以使用:hover代替.mouseenter添加.skew类来触发动画不是一个选项

IE10：Pseudo-Elements - 不能多次播放动画

0 个答案: