CSS3のホバートランジションを1回だけ実行し、ユーザーの「ホバーオーバー」後に「巻き戻し」しないようにするにはどうすればよいですか？

Question

私はいくつかのCSSを持っています（下を参照）。ユーザーが外側のフィールドの上に移動したときに内側のdiv（キティ）を画面全体に翻訳したいと思います。これはうまくいきますが、ユーザーが外のフィールドからマウスを外すと、アニメーションは「巻き戻し」され、ユーザーが再び戻ると再生します（もちろん）。私は、このアニメーションを一度（ユーザーが外部フィールド上を移動する最初の）実行する方法を把握しようとしています。これは可能ですか？私は自分のページに別のスクリプトを追加したくないのですが、それが唯一の修正であれば、私はそれを公開しています。前もって感謝します！

ウィル

<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'); 
    }); 
});