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（添加.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，但它在非伪元素上运行良好。这里有什么问题？

- -编辑 - -

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

但是我需要动画完成，以防 div 在它仍在播放时变得悬停，所以使用:hover而不是.mouseenter添加 .skew 类来触发动画不是一种选择。

4

0 回答 0