时尚的userChrome动画

Question

我正在使用Stylish for Firefox试图做一些涉及动画的奇特用户色彩。我的用户风格尝试创建一个按钮组，当它悬停时可以平滑地滑动，并在没有时平滑滑出，并且它特定于由https://www.facebook.com/about/messenger-for-firefox中找到的Facebook服务加载项创建的按钮，但应该很容易使用正确的CSS选择器适应其他按钮。

这里只是滑出的用户风格：

@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;}
}

它非常适合滑出，但是当我添加一行代码以便滑回时：

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

一切都崩溃了，没有任何动画发挥作用，按钮会立即出现并在悬停时消失，而不会分别悬停在上面。

有没有办法实现我想要的双向滑动效果，如果有，那是什么？