我怎样才能让一个CSS3悬停过渡只运行一次，而不是“倒带”之后用户“取消悬停”？(How can I

我有一些CSS（见下文），我想导致内格（猫咪）在屏幕转换，当用户将鼠标悬停在外部领域。 这是工作的罚款，但正如你所期望的，当用户从外场中删除他或她的鼠标，动画“倒带”，然后（当然），如果用户再次徘徊它重放。 我试图找出如何让这个动画运行一次（第一次用户将鼠标悬停外场），然后倒回或以后再上场，不管他或她在未来的悬停。 这可能吗？ 我不希望另一个脚本添加到我的网页，但如果这是唯一的解决方法，然后我打开它。 提前致谢！

将

<style type="text/css">
div.kitty {
    position: absolute; 
    bottom: 50px; 
    left: 20px; 
    -webkit-transition: all 3s ease-in; 
    -moz-transition: all 3s ease-in; 
    -o-transition: all 3s ease-in; 
    -ms-transition: all 3s ease-in;
    animation-iteration-count: 1;
}
#actioner {
    padding: 0px;
    height: 400px;
    position: relative;
    border-width: 1px;
    border-style: solid;
}
#actioner:hover div.kitty{
    -webkit-transform: translate(540px,0px); 
    -moz-transform: translate(540px,0px); 
    -o-transform: translate(540px,0px); 
    -ms-transform: translate(540px,0px);
}
</style>

<div id="actioner">
    <div class="kitty">Kitty-Cat Sprite</div>
</div>

Answer 1:

恕我直言，这是不可能用纯CSS做。 最简单的解决方案将使用jQuery。

// css
.actioner{
    -webkit-transform: translate(540px,0px); 
    -moz-transform: translate(540px,0px); 
    -o-transform: translate(540px,0px); 
    -ms-transform: translate(540px,0px);
}

// script
$(function(){
    $('.kitty').one("mouseover", function() {
        $('.kitty').addClass('actioner');
    });
});

文章来源: How can I make a CSS3 hover transition run only once and not 'rewind' after the user 'un-hovers'?