1

I've got a content that I need to move (needtoMove) and 2 buttons to control which way. It's important that the content is not reseted with me stop hovering over a button, so I justed animation-play-state With ! button it works fine, but with 2 buttons the second one doesn't respond to my hovering. Here is the code.

.needToMove {   
    -webkit-animation-name: right, left;
    -webkit-animation-duration: 20s, 20s;
    -webkit-animation-timing-function: linear, linear;
    -webkit-animation-iteration-count: infinite, infinite;
    -webkit-animation-play-state: paused, paused;
}

@-webkit-keyframes left {
    from {right: -100%;}
    to {right: 0%;}
}
@-webkit-keyframes right {
    from {left: -100%;}
    to {left: 0%;}
}

.button1:hover ~ .needToMove{
     animation-play-state: running, paused;
    -webkit-animation-play-state: running, paused;
}

.button2:hover ~ .needToMove{
     animation-play-state: paused, running;
    -webkit-animation-play-state: paused, running;
}

Is there a way how to do this without using Javascript? (I'm sure it'd be much easier with JS but at this point, it's like my holy mission to make this work with css eventually).

Thanks!

1 Answer 1

0

Seems like the best way to handle this would be to just add the appropriate animation depending on which button you hover over, rather than defining them both initially.

So just start out with:

.needToMove {
    -webkit-animation-duration: 20s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}

Define your keyframe animations, then on hover just add which one you want:

.button1:hover ~ .needToMove{
     -webkit-animation-name: right;
}
.button2:hover ~ .needToMove{
     -webkit-animation-name: left;
}
3
  • Thank for your answer. Though the problem remains. I need the animation to be paused while not hovering over the button. This way the animation always reset itself to 0% when I stop hovering. Jun 2, 2016 at 21:35
  • Sure. Try adding this animation-fill-mode: forwards; to your .needToMove class. (found from another SO thread)
    – Coleman
    Jun 2, 2016 at 21:42
  • Thanks. But it doesn't seem to work either. needToMove still keeps reseting itself when I stop hovering. I've put it on codepen. Maybe it'll be clearer, what's happening codepen.io/Albert24/pen/gMppGY Jun 2, 2016 at 22:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.