CSSキーフレームアニメーションで `アニメーション方向：反転 'が機能しないのはなぜですか？

Question

animation-direction: reverseを使用してCSSキーフレームアニメーションをリファクタリングしようとしています。コンテナdivをクリックすると、jQuery経由でアニメーション（「アクティブ」状態に応じて前方または後方）をトリガーする「アクティブ」クラスが表示されます。順方向アニメーションと逆方向アニメーションは、キーフレームが逆の順序であることを除いてまったく同じものです。私はanimation-direction: reverseが、ただ一つのアニメーションを使ってそれをリバターすることでリファクタリングすることができると考えましたが、それは私が思ったように動作していません。

リンク（animation-direction: reverseを使用せずに）codepenする： https://codepen.io/soultrust/pen/gogKjN

次のマークアップとCSS（サス）コードスニペットは、それが逆せずに機能するようになりました方法です。

<div class="container"> 
    <div class="line"></div> 
</div> 

 

$width-height: 100px; 
$duration: 1s; 
$line-width: 10%; 
$animation-distance: $width-height * .45; 

@keyframes line-in { 
    0% { transform: translateY(-$animation-distance); } 
    50% { transform: translateY(0); } 
    100% { transform: rotate(-135deg); } 
} 

@keyframes line-out { 
    0% { transform: rotate(-135deg); } 
    50% { transform: translateY(0); } 
    100% { transform: translateY(-$animation-distance); } 
} 

.container { 
    margin: 10rem auto 0; 
    width: $width-height; 
    height: $width-height; 
    position: relative; 
    border: 1px solid black; 

    &.active { 
    .line { 
     animation-name: line-in; 
     animation-direction: normal; 
    } 
    } 
} 

.line { 
    width: 100%; 
    height: $line-width; 
    position: absolute; 
    top: 45%; 
    background-color: orange; 
    animation-direction: normal; 
    animation-name: line-out; 
    animation-duration: $duration; 
    animation-fill-mode: forwards; 
} 

私は、次の "アクティブ" のアニメーションを変更すると、両方向のアニメーションが動作を停止します。

&.active { 
    .line { 
    animation-name: line-out; 
    animation-direction: reverse; 
    } 
} 

私はちょうどanimation-direction: reverseを設定し、animation-name: line-inを使用している場合、それは正しく逆にラインでアニメーションを果たしているので、それは同じアニメーションを使用してとは何かを持っていると信じています。

Answer 1

非常に良い質問です。あなたはすでにanimation-direction: reverse;が動作することに気付いています。あなたは非常に自分自身でこのCSSの気まぐれを理解するのに近くどこに。

メモを取るためのいくつかの追加規則があります。 CSSアニメーションを交換する/取り外すとき

• あなたがreverseを設定すると、アニメーションは
• 、0％から開始します（実際のアニメーションを変えずに）、アニメーションはそれがにあったものは何でも％から継続されます。
だから、

あなたが要素をクリックしてline-outアニメーション設定：

• をアニメーションは、あなたが設定したどんな方向に0％
• プレイからスタートします。

だけ新しいアニメーションの方向を適用する場合：

• それが何であっても割合、例えば、100％からアニメーション連続。

restartアニメーションをトリッキーにすることができます。要素が再作成されると、アニメーションが逆方向に再生されていることがわかります。これをデバッグするために

var clickFunc =function(e) {  
 
     //toggle the state 
 
     $(this).toggleClass("active"); 
 
     //reset the animatino state by cloning and replacing the element. 
 
     var newone = this.cloneNode(true); 
 
     this.parentNode.replaceChild(newone, this); 
 
     // reapply click handler to the cloned element 
 
     $(newone).click(clickFunc) 
 
} 
 

 

 
$(function() { 
 
    $(".question").click(function() { 
 
    $(this).toggleClass("active"); 
 
    }); 
 
    
 
    $(".answer").click(clickFunc); 
 

 
    $(".restart").click(function() { 
 
    $(".line").each(function() { 
 
     var newone = this.cloneNode(true); 
 
     this.parentNode.replaceChild(newone, this); 
 
    }); 
 
    }); 
 
});

@keyframes line-in { 
 
    0% { 
 
    transform: translateY(-45px); 
 
    } 
 
    50% { 
 
    transform: translateY(0); 
 
    } 
 
    100% { 
 
    transform: rotate(-135deg); 
 
    } 
 
} 
 
@keyframes line-out { 
 
    0% { 
 
    transform: rotate(-135deg); 
 
    } 
 
    50% { 
 
    transform: translateY(0); 
 
    } 
 
    100% { 
 
    transform: translateY(-45px); 
 
    } 
 
} 
 
.line { 
 
    width: 100%; 
 
    height: 10%; 
 
    position: absolute; 
 
    top: 45%; 
 
    background-color: orange; 
 
    animation-direction: normal; 
 
    animation-name: line-in; 
 
    animation-duration: 1s; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
.container { 
 
    margin: 1rem auto 0; 
 
    width: 100px; 
 
    height: 100px; 
 
    position: relative; 
 
    border: 1px solid black; 
 
} 
 
.container.reverse .line { 
 
    animation-name: line-in; 
 
    animation-direction: reverse; 
 
} 
 
.container.active .line { 
 
    animation-name: line-in; 
 
    animation-direction: reverse; 
 
} 
 
.container.active.reverse .line { 
 
    animation-name:line-in; 
 
    animation-direction: normal; 
 
} 
 

 
.container.out.active .line { 
 
    animation-name: line-out; 
 
    animation-direction: normal; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="restart">reset animation state</button><br> 
 
in -out 
 
<div class="container question out"> 
 
    <div class="line"></div> 
 
</div> 
 

 
active reversed 
 
<div class="container question"> 
 
    <div class="line"></div> 
 
</div> 
 

 
<br> 
 

 
workaround 
 
<div class="container answer reverse"> 
 
    <div class="line"></div> 
 
</div>

。あなたは、あなたのブラウザのウェブ開発ツールでアニメーションの状態を検査することができます

あなたのリファクタリングに関しては： 私はむしろアニメーションを逆転/再起動するために、JSのトリックを行うよりも、異なる方向に複数のアニメーションを持っているでしょう。

アニメーションの複雑さによっては、アニメーションフレームではなくCSSのトランジションを使用する方がよい場合があります。アニメーションの反転/リセットについて心配する必要はありません。