4

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

@-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 度，然后动画出来。唯一不起作用的是向后旋转；这“只是发生”，而不是动画。

4

1 回答 1

4

只需摆脱动画并在transform（示例）上设置过渡：

<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;（我相信目前仅在 webkit 中支持，但其他引擎的占位符代码），然后更改为完全可见和颜色（演示）：

<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);
}​
于 2012-07-06T16:10:40.327 回答