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

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

Animate.cssのデモについて

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

animate.style

 

39 Users

10567 Pockets

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

 

33 Users

1237 Pockets

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とい...