WAITを使用してCSSアニメーションを一時停止し、ループさせます。アニメイト

純粋なCSSアニメーションでできることはたくさんありますが、 アニメーションを一時停止してループ再生することはできません 現在のW3仕様で.

しかしのような無料のツールで 待つ！アニメイト あなたは実際にできます ループアニメーションを一から作成する と カスタム遅延 各ループ間これは平凡な作業のように思えるかもしれませんが、多くの開発者にとって苦痛な点を解決します。.

次のようなCSSプロパティがあります。 アニメーション遅延 どっち を遅らせる 開始 アニメーションの例. しかしそれは 繰り返しのアニメーションには影響しません 出発点を遅らせるだけなので.

待つ！アニメイト 自動計算 カスタムアニメーションキーフレーム内にいくつの一時停止を配置する必要があるか 正確な一時停止期間を作成する あなたはループの間に必要です。これは手作業で行うこともできますが、非常に煩わしいです。.

このWebアプリは CSS3アニメーション機能を使用する, 回転や変換を含みます。新しいCSSプロパティを書いているのではなく、むしろ キーフレーム機能の上に構築する 作成する 割合に基づく一時停止 アニメーションの内側（0％から100％）.

ホームページをチェックしてください。 いくつかの実例. あなたができることはかなり明確で、ソースコードはあなた自身の作品にコピー＆ペーストするためにそこにあります.

これに注意してください 本格的なライブラリではない. それはジェネレータです CSSコードをその場で作成 アニメーションの遅延に必要なものに基づいて.

あなたがより簡単な解決策をオフサイトにしたいのであれば、あなたはすることができます Sass mixinをダウンロードする. これは少しトリッキーです。 Sassマップが必要です, そのため、カスタムプロパティを追加して構文を正しく書く方法を理解する必要があります。.

これがあなたのやり方の例です。 ミックスインを呼び出す：

 @include waitAnimate（（animationName：animName、keyframes：（0：（変換：スケール（1）、背景色：青）、50：（変換：スケール（2）、背景色：緑）、100：（変換：スケール（3）、背景色：赤）、継続時間：2、待機時間：1、timingFunction：簡単、iterationCount：無限））。 

プロのWeb開発者は、ロープを習得してこれを再利用可能なミックスインに組み込むことに問題はないはずです。しかし初心者の開発者はそれを動かすのに苦労するかもしれません、それ故にWebアプリ.

このすべて ソースコード 無料で利用可能です GitHubで ローカルでコピーをダウンロードしたい場合しかし、これは非常に奇妙な機能なので、多くのプロジェクトでおそらく必要となるものではありません。だからWAIT！アニメートウェブアプリはあなたを助けるのに十分すぎるほどであるべきです 一時的な問題を解決する の 純粋なCSSでループアニメーションを遅らせる.

これは本当に楽しいハックで、これは設計上かなりわかりにくいものです。しかし、CSS3でどれだけの可能性があり、ちょっとした工夫が施されているかを示すことにします。.