CODEWITHSUNDEEP
animationcss
Claudiu Creanga
Claudiu Creanga

Reputation: 8386

CSS - Animation hover issue

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?

Upvotes: 0

Views: 492

Answers (1)

David Thomas
David Thomas

Reputation: 253486

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:

Upvotes: 2

Related Questions