手軽にアニメーションを「Animate.css」

この記事は【2022年7月21日】が最後の更新のため、記事の内容が古い可能性があります。

Webサイトにインパクトを与え、注目してもらいたいボタンやコンテンツを強調するのに役立つアニメーション。そんなアニメーション効果を簡単に導入できる「Animate.css」をご紹介します。

Animate.cssのデモについて

デモについては、公式サイトでご確認ください。
右側のメニューを選択すると、Animate.cssのロゴが変化し、それに対応したアニメーションを確認することができます。

animate.style

Animate.css | A cross-browser library of CSS animations.

https://animate.style

Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.

導入方法

GitHubからダウンロード可能

GitHub

GitHub - animate-css/animate.css: 🍿 A cross-browser library of CSS animation...

https://github.com/animate-css/animate.css

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

animate.min.cssをご自身のサーバーへアップしご利用ください。

CDNを利用したい場合は

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">

アニメーションの速度や動作なども細かくcssで指定可能です。またjsを利用することにより制御も可能。

※Animate.cssをご利用の際はライセンスにご注意ください。

Font Awesomeを利用した方法

Animate.cssほどアニメーションのバリエーションは少ないですが、Font Awesomeでアイコンやアニメーションをご利用であれば、アニメ効果をつけたい場合に使用する事も可能です。

このサイトではFont Awesomeを利用しているので、例えばボタンに変化をつけたい時などに利用しています。

膨らむアニメーション
ボタン

マウスオーバー時に変化するアニメーション
ボタン

Font Awesomeについてはこちらの記事をどうぞ！

フリーで使えるWebアイコンをホームページやブログにいかがですか？

RU DESIGN

2020.10.12

フリーで使えるWebアイコンをホームページやブログにいかがですか？

https://ru-design.work/web-material/post-699

各種アイコンなどフリー素材を配布しているサイトは多いですが、画像をダウンロードしてサーバーにアップしたりなど少し手間がかかりますよね。そんな時はWrbアイコンのサービスを利用するのがおすすめです。個人的に好きなのがFont Awesomeで、今回はこちらの使用方法について説明したいと思います。 WebアイコンについてWebアイコンは、HTMLのタグや特有のクラス名を付与することで、簡単にWebサイト上にアイコンを表示させることが可能です。フォント形式なのでCSSでカラーやサイズなども自由にできるのは特徴。pngやjpegとい...

- PR -

ニッチなテーマのイラスト素材投稿始めました。良かったら使ってください。
RU DESIGN/無料イラスト・フリー素材「イラストAC」

オリジナル絵本　Kindleにて出版
ナマケモノのふにゃまるちゃん

ドメイン取得は同じところで取得しておくと便利ですよ。

応援・支援よろしくお願いいたします。サイト運営に使わせていただきます。

■BTC
1PPYM4493tNYVZuGxXnYLpVdKJXSwFagPQ
■MATIC
0xC75744667A7396DFF507cf44371A2CF0B6eEF03B
■ETH
0xC75744667A7396DFF507cf44371A2CF0B6eEF03B