初心者でもウエブサイトに簡単にアニメーションを付けるためのコードを生成してくれるジェネレーターanimate.css
PR
CSSにあまり詳しくない方でも使いやすいツールanimate.cssです
HTML要素でアニメーションを付けたいものに2つのクラスを付けるだけで動作させれてしまうものです
アニメーションの種類は全部で70もあり、アニメーションが簡単に実装できます
EA、DISNEYもこのアニメーションを利用しているようです
CSSアニメーションジェネレーター animate.cssでアニメーションを実装してみる
まずはサイトにアクセスします、色々なアニメーションの効果が見れるボタンがあるので
色々ポチポチ押してみてください
画面上部に有るものがアニメーションします。
気に入ったものがあればそれをCSSファイルにしてダウンロードします
CSSファイルの作成はCreate custom build をクリックして作成します
作成画面ではアニメーションに掛かる時間の設定と、先ほどみたアニメーションで必要なものだけにチェックを付けます。必要なものにチェックをつけてアニメーションの時間を設定したら一番下になる Build itを押します
そうするとCSSが作成されてダウンロードが開始されます
あとはこのCSSをHTMLで読み込むか、すでにあるCSSファイルに内容をコピーします
アニメーションさせたい要素に2つのクラスを付けます
全てに共通して使うクラス [animated]
アニメーション名 [選択したアニメーション名＝class名]
要素に2つのクラスをつければ、それで完了です
bodyにフェードインを付けてしまうとか、ウェブサイト全体にアニメーション効果をつけてやるのも面白いです
PR
短縮URL:
COMMENT