CSS - Animation hover issue

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?

If the element moves from under the cursor, it's no longer hovered, therefore the :hover selector no longer matches that element; use a different target for the :hover interaction. — David Thomas
– David Thomas, Commented Sep 15, 2012 at 21:28

David Thomas · Accepted Answer · 2012-09-15 21:43:39Z

2

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:

edited Sep 15, 2012 at 21:43

answered Sep 15, 2012 at 21:35

David Thomas

254k53 gold badges382 silver badges421 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

David Thomas Over a year ago

@Claudiu, you're very welcome, and I'm glad to have been of help! I was going to just leave it as a comment, then I realised that there was a little more information to add, and some viable suggestions to be made; so I answered. Which is, hopefully far more useful! And, sincerely, my thanks for the accept! =)

Collectives™ on Stack Overflow

CSS - Animation hover issue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related