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


Tags: animation,css3,hover

Problem :

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>


Solution :

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

    CSS Howto..

    How does calc() CSS property degrade in older browser

    How do I make an image semi-transparent?

    Sub menu wont show when menu item hovered over (css html)

    How do I insert content after text in an html element using CSS?

    How to switch css property according to some condition

    How to following a link without modifying the displayed url and triggering css animation?

    How to make the divider between two tbody elements moveable

    What is this HTML notation and how can I use it myself?

    How to position a div under a link on click?

    How to properly adjust CSS Form Select field if content is larger than image

    How to make slide down menu to slide up?

    What to do to align text as shown in the image using HTML and CSS?

    CSS: How to change css class of li in a navigation

    HTML/CSS - how to align boxes / divs [closed]

    How to squircle an app icon image with just CSS

    How to change CSS color values in real-time off a javascript slider?

    How can i get height form window top to my click point(a tag) on window using css or jquery or php?

    toggleClass on the same container and show different content with tabs effect

    How to adjust the size of background image with browsers window using media queries

    How to add a new CSS class to a Link Badge if the value is 0?

    CSS - How to make a div's padding not affect the positioning of the div below it

    How to give the a specific background color in CSS?

    Show/hide stuff according to checkboxes using CSS: Why this code won´t work?

    How to edit .css file from html via jquery

    How to organize css files in a Joomla 2.5 template? [closed]

    How to make textareas auto-resize using just CSS?

    How to make a wrapper for HTML, CSS and Javascript Pages in iOS

    How to version files in the section?

    How to conditionally load CSS and extend it using SASS/SCSS

    How can I select the item that doesn't have attribute [duplicate]