reverse svg animation when hover is over?

Question

I simply want my svg lines to reverse their animation after the user stops hovering over the parent div switch executes it.

There is a fair amount of code so I just made a jsbin:

http://jsbin.com/tiwejekicu/2/edit

So my question is: how do I get it to act like any old transition and reverse itself when the hover is over. ALSO: how come when the yellow box is clicked a blue fade comes from the left edge? Any ideas?! Thanks a lot for any help!

score 0 · Accepted Answer · edited May 23 '17 at 11:57

0

You need to have two @keyframe rules:

@keyframe in {
from {something;}
to {to something;}
}
@keyframe out {
from {something;}
to {transform: rotate(0deg);}
}

Check out this question it's basically the same.

edited May 23 '17 at 11:57

Community

1
1

answered Nov 02 '14 at 07:43

ceckleder

26
1

Please show how this would work with the asker's current code. – Ian Hazzard Nov 03 '14 at 02:55

reverse svg animation when hover is over?

1 Answers1