Question

I have this issue with getting an animation working only if the user hovers over a div.
I made a jsfiddle: http://jsfiddle.net/HBfLY/1/

So I want it to bounce in from the left, but instead it is blinking. What I am doing wrong?

Answer 1

The problem you’re experiencing is that, once the element changes its position due to the animation, it’s no longer hovered-over by the cursor, therefore the :hover selector no longer applies.

To remedy this you could apply the :hover to an ancestor element:

body:hover #animatie1 {
    border: 5px solid black;
    position:relative;
    top: 20px;
    left:100px;
    width:100px;
    height: 200px;
    animation:mymove 2s ;
    -moz-animation:mymove 2s ; /* Firefox */
    -webkit-animation:mymove 2s ; /* Safari and Chrome */
    -o-animation:mymove 2s ; /* Opera */
}

JS Fiddle demo.

Or use a preceding sibling element:

#immediatelyPrecedingSibling:hover + #animatie1 {
    border: 5px solid black;
    position:relative;
    top: 20px;
    left:100px;
    width:100px;
    height: 200px;
    animation:mymove 2s ;
    -moz-animation:mymove 2s ; /* Firefox */
    -webkit-animation:mymove 2s ; /* Safari and Chrome */
    -o-animation:mymove 2s ; /* Opera */
}

JS Fiddle demo.

In those browsers that support the general-sibling combinator, you could use any preceding sibling element (so long as you can target it with CSS, and, to reiterate, that this sibling precedes the element to be targeted in the DOM):

#notAnImmediatelyPrecedingSibling:hover ~ #animatie1 {
    border: 5px solid black;
    position:relative;
    top: 20px;
    left:100px;
    width:100px;
    height: 200px;
    animation:mymove 2s ;
    -moz-animation:mymove 2s ; /* Firefox */
    -webkit-animation:mymove 2s ; /* Safari and Chrome */
    -o-animation:mymove 2s ; /* Opera */
}

JS Fiddle demo.

References:

• Browser support for general sibling ~ combinator.
• CSS Level 3 Selectors.