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

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

CSS, 技術メモ

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

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

Animate.cssのデモについて

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

導入方法

GitHubからダウンロード可能

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

CDNを利用したい場合は

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

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

Font Awesomeを利用した方法

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

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

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

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

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

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

ホームページ制作ならRU DESIGN
ドメイン取得は同じところで取得しておくと便利ですよ。 お名前.comは1円から購入できるドメインがあるので、いろいろと便利で経済的です。

関連記事

アスペクト比を指定し保持できるaspect-ratio
アスペクト比を指定し保持できるaspect-ratio
2022/07/05
YouTubeなどの動画を埋め込む際、そのまま貼り付けるとスマホなどモバイルで表示した際にはみ出てしまいます。テーマによっては、レスポンシブに対応しているかと思...
WordPressのリビジョン機能を制御 
WordPressのリビジョン機能を制御 
2022/07/05
ワードプレスにはリビジョンという、記事の編集中に変更した履歴を保存する機能が標準にあります。 これは、下書きや公開済み投稿の更新記録を自動で保存してくれるもので...
CSS フィルター効果の応用
CSS フィルター効果の応用
2022/07/05
CSSのfilterプロパティを利用したフィルター効果一覧の記事を書きましたが、今回は応用的な使い方をごしょうかいします。 複数のフィルター効果を使用 複数の効...
CSSのfilterプロパティを利用したフィルター効果一覧
CSSのfilterプロパティを利用したフィルター効果一覧
2022/07/04
前回の記事CSSのみでテキストや画像にぼかし効果を付けるでは、ぼかし(ブラー)効果について書きました。今回はその他のフィルター効果をご紹介します。 HTMLでの...
CSSのみでテキストや画像にぼかし効果を付ける
CSSのみでテキストや画像にぼかし効果を付ける
2022/07/04
テキストや画像にぼかし(ブラー)効果をつけたい時に、画像加工をしなくてもCSSのfilterプロパティを利用して同様の効果を表現することができます。 <d...
LINEからもお問い合わせできます

お問い合わせ

制作依頼。業務委託・webや広告に関することなどお気軽にお問い合わせください。

    必須 お名前

    必須 メールアドレス

    必須 お問い合わせ内容

    必須 メッセージ本文

    このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシー利用規約が適用されます。