WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： mane
カテゴリー： マークアップ >CSS

複雑な動きをするアニメーションもいいけど、コーポレート用などシンプルな動きのアニメーションを使用したい時、ありませんか？
そんな時に、すごくカンタンにシンプルなアニメーションが楽しめるライブラリを紹介します。

WAIT! Animate を使ってみよう

まずはサイトにアクセス！

WAIT! Animate を使って簡単な設定を行っていきます。

まずはこちらのサイトにアクセス↓↓
WAIT! Animate

少し下にスクロールすると、「EXAMPLE ANIMATIONS」という項目が現れます。

ここでカスタマイズを行っていきます。

設定項目

「Preview」のところで動きが確認できます。

「Animation」のところで使用したい動きを選びます。

「Wait time」のところでリピートするまでの時間を決めます。
単位は「秒」です。0秒にすると、止まることなく永遠と繰り返されます。
FLOATの動きなどは0秒に設定した方が自然ですね！

「CSS」こちらに指定した動きがCSSとして書き出されます。

ソースコードの入力

設定したら、表示されているCSSをコピーしてCSSファイルに貼りつけます。
HTMLの動かしたいコンテンツにクラス名を付与します。
※クラス名は「Animation」で決めたアニメーションの名前が入ります。

すると、このように簡単に動かすことができます！

See the Pen
zYvdagR by ayane shimane (@shimaneA)
on CodePen.

また、「CUSTOM ANIMATION」の項目で、より細かく動きを指定する事もできます。
ぜひ試してみて下さい！