初心者でもウエブサイトに簡単にアニメーションを付けるためのコードを生成してくれるジェネレーターanimate.css

HTMLの要素に簡単にアニメーションを付けるためのコードを生成してくれるジェネレーターanimate.css
このエントリーをはてなブックマークに追加
PR

CSSにあまり詳しくない方でも使いやすいツールanimate.cssです
HTML要素でアニメーションを付けたいものに2つのクラスを付けるだけで動作させれてしまうものです
アニメーションの種類は全部で70もあり、アニメーションが簡単に実装できます

EA、DISNEYもこのアニメーションを利用しているようです

 

CSSアニメーションジェネレーター animate.cssでアニメーションを実装してみる

https://daneden.me/animate/

まずはサイトにアクセスします、色々なアニメーションの効果が見れるボタンがあるので
色々ポチポチ押してみてください

初心者でもウエブサイトに簡単にアニメーションを付けるためのコードを生成してくれるジェネレーターanimate.css (3)

画面上部に有るものがアニメーションします。

 

気に入ったものがあればそれをCSSファイルにしてダウンロードします
CSSファイルの作成はCreate custom build をクリックして作成します

初心者でもウエブサイトに簡単にアニメーションを付けるためのコードを生成してくれるジェネレーターanimate.css (2)

 

作成画面ではアニメーションに掛かる時間の設定と、先ほどみたアニメーションで必要なものだけにチェックを付けます。必要なものにチェックをつけてアニメーションの時間を設定したら一番下になる Build itを押します

初心者でもウエブサイトに簡単にアニメーションを付けるためのコードを生成してくれるジェネレーターanimate.css (1)

そうするとCSSが作成されてダウンロードが開始されます

 

 

あとはこのCSSをHTMLで読み込むか、すでにあるCSSファイルに内容をコピーします
アニメーションさせたい要素に2つのクラスを付けます

全てに共通して使うクラス [animated]
アニメーション名 [選択したアニメーション名=class名]

要素に2つのクラスをつければ、それで完了です

 

bodyにフェードインを付けてしまうとか、ウェブサイト全体にアニメーション効果をつけてやるのも面白いです

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)