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

时间：2012-07-06 14:01:58

标签： animation css3 hover rotation

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

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

1 个答案:

答案 0 :(得分：4)

只需摆脱动画并在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;和灰度开始（我相信只在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);
}​
相关问题
最新问题