Question

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!

Will

<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

IMHO, it is not possible to do with pure CSS.
The easiest solution will be using 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');
    });
});