animation - css3 アニメーションが逆にアニメーション化されないのはなぜですか?

Question

要素がホバー時にロールインし、マウスアウト時にロールアウトする単純なアニメーションがあります。

@-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 度反転してアニメーションアウトします。機能していないのは、逆回転だけです。これは、アニメーション化するのではなく、「ちょうど起こる」ものです。

score 4 · Accepted Answer

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);
}

animation - css3 アニメーションが逆にアニメーション化されないのはなぜですか?

1 に答える 1

代替ソリューション

Related

Reference