今夜はロールバック!

毎週火曜に1冊、オススメ小説を紹介していきます。

TOP

要素に面白い動きをつけてくれるアニメーションライブラリ「Animate.css」

f:id:momogaaaa:20180506135203j:plain

WebサイトやブログのHTML要素に面白い様々な動きを付けることのできるアニメーションライブラリ「Animate.css」を紹介。

 

アニメーションの種類は約50種類ほど。例えば何かを選択した時などとか、派手ではないがちょっとしたアクセントに活用できそうなものが多い。ライセンスはMIT。

 

デモページ

Animate.css

 

GitHub

ボタンをクリックして特定の要素に一度のみアニメーションを付けたい場合は、こちらのGitHubの「Usage」の通りに実装するとそのような動きが付けることができる。

GitHub - daneden/animate.css: 🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.

 

Webpack

こちらのライブラリはWebpackからも使うことができる。以下使い方。

 

ディレクトリ作成後、こちらのコマンドを実行

npm init -y
npm install webpack webpack-cli --save-dev
npm install animate-css-webpack --save
npm install jquery --save

 

その後、以下の手順に沿って、srcディレクトリ配下にanimate-css.config.jsを作成して、webpack.config.jsの設定を変更する。

animate-css-webpack - npm

 

さいごに

知名度の高いライブラリなのですでに使っている人も多いはず。そしてWebpackから簡単に使えるようになったことは非常にメリットが大きい。