待機時間も設定できるCSS3アニメーションのコードを生成できるサイト「WAIT! Animate」!

2016/06/15

こんにちは。
今回は待機時間も設定できるCSS3アニメーションのコードを生成できるサイト「WAIT! Animate」!です。

14種類のCSS3のアニメーションを実装できるジェネレーターを紹介します。

待機時間も設定できるCSS3アニメーションのコードを生成できるサイト「WAIT! Animate」!

WAIT! Animate

wait-animate

waitanimate.eggbox.io/

 

「WAIT! Animate」の使い方

wait-animate2

使い方は簡単で、「Wait time」でアニメーションの待機時間を設定し、その下の「Animation」で14種類のアニメーションのタイプを選択します。
左上の「Preview」で動きを確認できますよ。
最後に右下の「COPY TO CLIPBOARD」のボタンをクリックするとコードをコピーできます。

 

wait-animate3

カスタムでアニメーションの角度や時間を設定する事もできますよ。

 

実践Webデザイン jQuery+CSSフレームワークでサクサクつくる「動き」と「仕掛け」
実践Webデザイン jQuery+CSSフレームワークでサクサクつくる「動き」と「仕掛け」

 

いかがでしたか。簡単に待機時間が指定できるが良いですね。
以上で待機時間も設定できるCSS3アニメーションのコードを生成できるサイト「WAIT! Animate」!でした。

topへ戻る