为什么我的 css3 动画不会反向动画？答案

【问题标题】：Why won't my css3 animation animate in reverse?为什么我的 css3 动画不会反向动画？
【发布时间】：2012-07-07 00:03:10
【问题描述】：

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

@-webkit-keyframes swing {
    0%   { -webkit-transform: rotate(180deg);}
    100%   { -webkit-transform: rotate(0);}
}
@-moz-keyframes swing {
    0%   { -moz-transform: rotate(180deg);}
    100%   { -moz-transform: rotate(0);}
}
a#element{  
    margin-left: 100%;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transition: margin-left 1s ease;
    -moz-transition: margin-left 1s ease;
    transition: margin-left 1s ease;
}
#element:hover a#element-color{
    -webkit-animation: swing 1s 0 1 alternate forwards; 
    -moz-animation: swing 1s 0 1 normal forwards; 
    animation: swing 1s 0 1 alternate forwards; 
    margin-left: 0;
}

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

【问题讨论】：

您能添加您正在使用的 HTML 吗？只是一个猜测，但我认为你的选择器错误（a#element 和#element:hover a#element-color 是不可能的，因为a 不能是另一个a 的孩子，并且在单个文档中只允许一个任何值的ID ）。更好的是：jsFiddle.net 上的示例链接。
另外，animation:...; 中的forwardsf 应该是forward。
我修正了代码中的拼写错误。这是一个 jsFiddle：jsfiddle.net/eubYk 我在上面的代码中使用了术语“元素”，所以它是清晰的。

标签： animation css hover rotation

【解决方案1】：

只需摆脱动画并在transform (example) 上设置一个过渡：

<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>

.sm-button, .sm-link{
    display: block;
    float: left;
    height: 64px;
    overflow: hidden;
    text-indent: -999999px;
    width: 64px;
}
.sm-button{
    margin-top: 10px;
}
#google-plus-ghost{
    background: transparent url(http://healthfreakgeek.com/wp-content/themes/nathanstaines-starkers-html5-b101efa/images/googlePlusGhost.gif) no-repeat 0 0;
}
#twitter-ghost{
    background: transparent url(http://healthfreakgeek.com/wp-content/themes/nathanstaines-starkers-html5-b101efa/images/twitterGhost.gif) no-repeat 0 0;
    margin: 10px 5px 0 10px;
}
#linkedin-ghost{
    background: transparent url(http://healthfreakgeek.com/wp-content/themes/nathanstaines-starkers-html5-b101efa/images/linkedinGhost.gif) no-repeat 0 0;
    margin: 10px 10px 0 5px;
}
#facebook-ghost{
    background: transparent url(http://healthfreakgeek.com/wp-content/themes/nathanstaines-starkers-html5-b101efa/images/facebookGhost.gif) no-repeat 0 0;
}
a#google-plus-color{
    background: transparent url(http://healthfreakgeek.com/wp-content/themes/nathanstaines-starkers-html5-b101efa/images/googlePlusColor.gif) no-repeat 0 0;
}
a#twitter-color{
    background: transparent url(http://healthfreakgeek.com/wp-content/themes/nathanstaines-starkers-html5-b101efa/images/twitterColor.gif) no-repeat 0 0;
}
a#linkedin-color{
    background: transparent url(http://healthfreakgeek.com/wp-content/themes/nathanstaines-starkers-html5-b101efa/images/linkedinColor.gif) no-repeat 0 0;
}
a#facebook-color{
    background: transparent url(http://healthfreakgeek.com/wp-content/themes/nathanstaines-starkers-html5-b101efa/images/facebookColor.gif) no-repeat 0 0;
}
a#google-plus-color,
a#twitter-color,
a#linkedin-color,
a#facebook-color {    
    margin-left: 100%;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition: margin-left 1s ease, -webkit-transform 1s ease;
    -moz-transition: margin-left 1s ease, -moz-transform 1s ease;
    -ms-transition: margin-left 1s ease, -moz-transform 1s ease;
    -o-transition: margin-left 1s ease, -moz-transform 1s ease;
    transition: margin-left 1s ease, transform 1s swing;
}
#google-plus-ghost:hover a#google-plus-color,
#twitter-ghost:hover a#twitter-color,
#linkedin-ghost:hover a#linkedin-color,
#facebook-ghost:hover a#facebook-color {
    margin-left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

替代解决方案

我更多地使用代码，并想出了一个从下一个图标后面推出的新版本，而不是简单地消失在方形边缘。我还大量清理了代码以摆脱 ID（并使代码可重用）。而且，只是为了好玩，我让滚动图像以 opacity:0; 和 grayscale 开始（我相信目前仅在 webkit 中支持，但其他引擎的占位符代码），并更改为完全可见和颜色 (demo)：

<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>

.social-buttons {
    overflow:hidden;
    float:left;
    padding-right:64px;
}
.social-buttons .ghost {
    position:relative;
    display: block;
    float: left;
    height: 64px;
    width: 64px;
    margin:10px 0 0 10px;
}
.social-buttons .color {
    display:block;
    height:64px;
    width:64px;
    text-indent: -999999px;
}
.social-buttons .google-plus.ghost {
    z-index:1;
    background: transparent url(http://healthfreakgeek.com/wp-content/themes/nathanstaines-starkers-html5-b101efa/images/googlePlusGhost.gif) no-repeat 0 0;
}
.social-buttons .twitter.ghost {
    z-index:2;
    background: transparent url(http://healthfreakgeek.com/wp-content/themes/nathanstaines-starkers-html5-b101efa/images/twitterGhost.gif) no-repeat 0 0;
}
.social-buttons .linkedin.ghost {
    z-index:3;
    background: transparent url(http://healthfreakgeek.com/wp-content/themes/nathanstaines-starkers-html5-b101efa/images/linkedinGhost.gif) no-repeat 0 0;
}
.social-buttons .facebook.ghost {
    z-index:4;
    background: transparent url(http://healthfreakgeek.com/wp-content/themes/nathanstaines-starkers-html5-b101efa/images/facebookGhost.gif) no-repeat 0 0;
}
.social-buttons .google-plus a.color {
    background: transparent url(http://healthfreakgeek.com/wp-content/themes/nathanstaines-starkers-html5-b101efa/images/googlePlusColor.gif) no-repeat 0 0;
}
.social-buttons .twitter a.color {
    background: transparent url(http://healthfreakgeek.com/wp-content/themes/nathanstaines-starkers-html5-b101efa/images/twitterColor.gif) no-repeat 0 0;
}
.social-buttons .linkedin a.color {
    background: transparent url(http://healthfreakgeek.com/wp-content/themes/nathanstaines-starkers-html5-b101efa/images/linkedinColor.gif) no-repeat 0 0;
}
.social-buttons .facebook a.color {
    background: transparent url(http://healthfreakgeek.com/wp-content/themes/nathanstaines-starkers-html5-b101efa/images/facebookColor.gif) no-repeat 0 0;
}
.social-buttons a.color {
    opacity:0;
    margin-left: 100%;
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -ms-filter: grayscale(1);
    -o-filter: grayscale(1);
    filter: grayscale(1);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.social-buttons .ghost:hover a.color {
    opacity:1;
    margin-left: 0;
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -ms-filter: grayscale(0);
    -o-filter: grayscale(0);
    filter: grayscale(0);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

【讨论】：

太棒了，我知道它是那么小的东西。我试过了，但我试图使用旋转而不是变换。事后看来是 20/20，对吧？
@dcp3450，只是为了提高我的能力，我在答案中添加了一个second solution，这导致图标从下一个图标后面推出，开始灰度（在 webkit 中）和透明，并以颜色结束。（而且，如果你使用它，你能告诉我，以便我删除第一个解决方案吗？）
+1 @bfrohs，哇！您的第二个解决方案在 Firefox v14 中运行良好。干杯！