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

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

Animate.cssのデモについて

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

animate.style

40 Users

10642 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

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

🕒️2020年10月12日

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

関連投稿:

【初心者Webガイド】あなたのブログ・HPにぴったりのカテゴリはどう決める？失敗しない考え方と具体例 【WordPress初心者さん必見！】「これ、どうすればいいの？」検索しても意外と見つからない疑問を解決！ 子テーマを作ってWordPressの既存テーマをカスタマイズしてみよう ワードプレス5.9のリリースが延期に。新機能のフルサイト編集とは？