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

mane

2020/05/20

シンプルで使いやすいアニメーションがカンタンに楽しめる!【WAIT! Animate】

投稿者: 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」の項目で、より細かく動きを指定する事もできます。
ぜひ試してみて下さい!

最後までお読みいただき、ありがとうございました。
よろしければシェアしていただければ幸いです。

  • このエントリーをはてなブックマークに追加

関連記事

よろしければこちらの記事もお読みください。

WEB業界ならqam!qam(カム)はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ(コーディング)、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど(読めば読むほど)制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。

トップへ