Animation 为什么赢了'；我的css3动画不能反向设置动画吗？

我有一个简单的动画，其中有一个元素在悬停时滚入，然后在鼠标移出时滚出：

@-webkit关键帧摆动{
0%{-webkit变换：旋转（180度）；}
100%{-webkit变换：旋转（0）；}
}
@-moz关键帧摆动{
0%{moz变换：旋转（180度）；}
100%{moz变换：旋转（0）；}
}
一个#元素{
左边距：100%；
-webkit变换：旋转（180度）；
-moz变换：旋转（180度）；
-webkit过渡：边距左1秒；
-moz过渡：边距左1秒；
过渡：边距左1秒缓和；
}
#元素：将鼠标悬停在#元素颜色上{
-webkit动画：摆动1s 0 1交替向前；
-moz动画：摆动1s 0 1正常向前；
动画：摆动1s 0 1交替向前；
左边距：0；
}

---

这在滚入时效果很好，但当我将鼠标移出时，元素会翻转180度，然后设置动画。唯一不起作用的是向后旋转；这是“刚好发生”，而不是动画。

只需去掉动画并在

变换上设置一个转换即可：

替代溶液
我对代码进行了更多的研究，并提出了一个新版本，它从下一个图标后面推出，而不是简单地消失在方形边缘。我还对代码进行了大量清理，以消除ID（并使代码可重用）。而且，只是为了好玩，我让滚动图像以
opacity:0开始和灰度（我认为目前仅在webkit中支持，但其他引擎支持占位符代码），并更改为完全可见和彩色（）：

你能添加你正在使用的HTML吗？我只是猜测一下，但我认为您的选择器是错误的（
a#元素
和
#元素：悬停a#元素颜色
是不可能的，因为
a
不能是另一个
a
的子元素，并且单个文档中只允许有一个ID值）。更好的是：一个指向上的示例的链接。另外，
动画中的
forwardsf
：应该是
向前的
。我修复了代码中的拼写错误。这里有一个JSFIDLE：我在上面的代码中使用了“元素”一词，所以它很清晰。太棒了，我知道它是这样的小东西。我试过了，但我试着用旋转代替变换。事后诸葛亮是20/20，嗯？@dcp3450，只是为了提高我的能力，我在我的答案中添加了一个，使图标从下一个图标后面滚出来，开始是灰度（在webkit中）和透明的，然后以颜色结束。（如果你使用它，你能告诉我，这样我就可以删除第一个解决方案吗？+1@bfrohs，哇！您的第二个解决方案在Firefox v14中运行良好。干杯
<span id="google-plus-ghost" class="sm-button">
 <a href="/" class="sm-link" id="google-plus-color">Google Plus</a>
</span>
<span id="twitter-ghost" class="sm-button">
 <a href="/" class="sm-link" id="twitter-color">Google Plus</a>
</span>
<span id="linkedin-ghost" class="sm-button">
 <a href="/" class="sm-link" id="linkedin-color">Google Plus</a>
</span>
<span id="facebook-ghost" class="sm-button">
 <a href="/" class="sm-link" id="facebook-color">Google Plus</a>
</span>​

<div class="social-buttons">
    <span class="google-plus ghost">
        <a href="/" class="color">Google Plus</a>
    </span>
    <span class="twitter ghost">
        <a href="/" class="color">Twitter</a>
    </span>
    <span class="linkedin ghost">
        <a href="/" class="color">LinkedIn</a>
    </span>
    <span class="facebook ghost">
        <a href="/" class="color">Facebook</a>
    </span>
</div>