如何使 CSS3 悬停过渡只运行一次，而不是在用户“取消悬停"后“倒带"?

I have some CSS (see below) and I want to cause the inner div (kitty) to translate across the screen when the user hovers over the outer field. This is working fine but, as you would expect, when the user removes his or her mouse from the outer field, the animation 'rewinds' and then (of course) it replays if the user hovers again. I am trying to figure out how to get this animation to run once (the first time the user hovers over the outer field) and then not rewind or play ever again, no matter what he or she hovers over in future. Is this possible? I'd prefer not to add another script to my page, but if that is the only fix then I'm open to it. Thanks in advance!

会

<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>

推荐答案

恕我直言，纯 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');
    });
});