Stylish userChrome animation

Question

I am messing with Stylish for Firefox trying to do some fancy userchrome stuff involving animations. My userstyle attempts to make a button group that slides in smoothly when hovered over, and slides out smoothly when not, and it is specific to the buttons created by the Facebook service add-on found here https://www.facebook.com/about/messenger-for-firefox but should easily be able to be adapted to other buttons with the right CSS selectors.

Here is the userstyle with only sliding out implimented:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

#social-toolbar-item {
overflow: hidden;
}

#social-toolbar-item:not(:hover) {
width: 31px;
}

#social-toolbar-item:hover {
animation: open 500ms;
width: 128px;
}

@keyframes open {
  0% {width: 31px;}
100% {width: 128px;}
}

It works perfectly for sliding out, but when I add one line of the code for sliding back in:

#social-toolbar-item:not(:hover) {
animation: open 500ms reverse;
width: 31px;
}

everything falls apart, and none of the animations function, the buttons instantly appear and disappear when hovered over and not hovered over respectively.

Is there a way to achieve the two way sliding effect I want, and if so, what is it?