Turn off animations on the voting button

Question

When my mouse hovers over a vote (up/down) button or “favorite” in Chrome 53, there is a very annoying visual effect where the button “pops out” (becomes slightly bigger, then back to the original size) for a fraction of a second. I'm told that this is by design.

Ok, but it's extremely annoying. How can I turn it off?

I've successfully turned off the animation when clicking an up/downvote button with user CSS (I wish I didn't have to copy this to every browser, though):

a.vote-up-off {
    transition: none !important;
}
a.vote-up-on {
    transition: none !important;
}
a.vote-down-off {
    transition: none !important;
}
a.vote-down-on {
    transition: none !important;
}

But I can't figure out how to turn off the animation that happens on mouse hover. How do I get rid of this animation?

Answer 1

Actually, though the animation is done by an event listener (as Matthew pointed out), there's no userscript needed. You can easily fool the javascript part by setting the animation duration to 0s in CSS:

.vote-up-off:hover, .vote-down-off:hover { animation-duration: 0s; }

That did it for me at least.