2

我正在搞乱 Firefox 的时尚，试图做一些涉及动画的花哨的 userchrome 东西。我的用户样式尝试制作一个按钮组，当鼠标悬停时平滑滑入，而不是平滑滑出，它特定于由 Facebook 服务插件创建的按钮，在此处找到https://www.facebook.com/ about/messenger-for-firefox但应该很容易通过正确的 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;
}

一切都崩溃了，没有任何动画功能，当悬停和不悬停时，按钮会立即出现和消失。

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

4

0 回答 0