reverse -webkit-要素を隠すためのアニメーション反復

Question

divに使用するこのアニメーションは画面に表示されるので、下から来て最終的な位置にとどまります。

@-webkit-keyframes slide { 
    from { opacity: 0; -webkit-transform: translateY(500px); } 
    to { opacity: 1; -webkit-transform: translateY(0);  } 
} 

.module { 
    -webkit-animation: slide .4s 0 1 normal ease none; 
} 

それはDIVのために、私はclass='done'を割り当てるとき、それは同じアニメーションを取ると逆のdivを隠して同じ効果をシミュレートし、それを再生する可能性がある場合、私は考えていました。

.module.done { 
    -webkit-animation: slide .4s 0 1 alternate ease none; 
} 

が、それは常に後者の場合では1回の反復から開始するようだ、私はそれが元の位置からスタートし、その後、それは500px

上にスライドできるようなアニメーションを逆にしたいと思います： のような同じアニメーションを使用することができますか、逆の値を持つ新しいアニメーションを作成する必要がありますか？私はあなたが適切な負の値（それが最初の反転から始まる）にアニメーション遅延を設定することにより、これを行うことができると信じて

おかげ

Answer 1

この特定のユースケースは、CSSトランジションで最も効果的です。また、OperaとFF 3.5以降の無料サポートも利用できます。これは基本的な構文です：

#notice { 
    -vendor-transition: -webkit-transform 2s ease; 
} 

#notice.pop { 
    -vendor-transform: translateY(50px); 
} 

.popを追加または削除すると、自動的にアニメーションが実行されます。

実施例チェックアウト： http://jsfiddle.net/qLKzX/

Answer 2

。