[解決済み] CSS3でアニメーションを再開する: 要素を削除するよりも良い方法は?

質問

CSS3のアニメーションがあるのですが、クリックすると再開される必要があります。これは、残り時間を示すバーです。私は効果を作成するためにscaleY(0)変換を使用しています。

ここで、バーを scaleY(1) に戻し、再び scaleY(0) にすることによってアニメーションを再開する必要があります。 scaleY(1) を設定する私の最初の試みは、完全な長さに戻すのに同じ 15 秒がかかるため、失敗しました。継続時間を 0.1 秒に変更したとしても、バーの補充を完了させるために scaleY(0) の割り当てを遅延させるかチェーンする必要があります。 このような単純なタスクに対してあまりにも複雑に感じられます。

ドキュメントから要素を削除し、そのクローンを再挿入することによってアニメーションを再開するための興味深いヒントも見つけました。 http://css-tricks.com/restart-css-animation/

動作はするのですが、CSSアニメーションを再開させる良い方法はないでしょうか？ 私はPrototypeを使っていて Move.js を使用していますが、それらに限定されるものではありません。

どのように解決するのですか？

単に animation プロパティをJavaScriptで "none" に変更し、タイムアウトを設定する。 "" に変更し、再びCSSから継承されるようにします。

Webkit用のデモはこちらです。 http://jsfiddle.net/leaverou/xK6sa/ ただし、実際の使用では、（少なくとも）-moz- も含める必要があることに留意してください。