LPなどのPR重視のページではまだまだ有効な視覚効果が得られるのが「アニメーション」。最近はWordpressのテーマでデフォルトで組み込まれているものもあるので自分で実装する機会も少ないかもしれませんが目を引くポイントとなるので、ライブラリをいくつかピックアップ。
目次
簡単にサイトにアニメーションを入れる
テキストを動かす（animate.css）
CSSファイルのダウンロード
https://github.com/animate-css/animate.css?files=1
公式サイトとデモ
https://animate.style/
あわせて読みたい
Animate.css | A cross-browser library of CSS animations.
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-guidi…
animate.cssの使い方を見る
STEP
headerにファイルを読み込み
CSSをダウンロードして配置した場合
<head>
<link rel="stylesheet" href="animate.min.css">
</head>CDNでリンクする場合
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head> STEP
動かしたいテキスト部分に記述する
要素にanimatedクラスと動かしたいクラス名（例：bounce）をつけます。公式サイト より確認してください。
<div class="animated bounce アニメーションを繰り返しループさせたい場合は以下クラスを追加
<div class="animated bounce infinite STEP
追加設定
アニメーションの動きに調整を入れたい場合は以下を追加します。公式サイト より確認してください。
STEP
動きの調整をするCSSを追加
.add-operation{
/* 3秒かけてアニメーションする */
-webkit-animation-duration: 3s;
animation-duration: 3s;
/* 10秒待ってからアニメーションする */
-webkit-animation-duration: 10s;
animation-delay:10s;
/* 5回繰り返す */
-webkit-animation-iteration-count: 5;
animation-iteration-count: 5;
}※必要に応じて他のベンダープレフィックスを追加します。
STEP
動かしたいテキスト部分に記述する
<div class="animated bounce add-operation
マウスオーバーで動かす（hover.css）
CSSファイルのダウンロード
https://github.com/IanLunn/Hover
公式サイトとデモ
https://ianlunn.github.io/Hover/
hover.cssの使い方を見る
STEP
headerにファイルを読み込み
CSSをダウンロードして配置した場合
<head>
<link rel="stylesheet" href="hover-min.css">
</head> STEP
動かしたい部分に記述する
要素に動かしたいクラス名（例：hvr-grow）をつけます。「hvr-」部分は固定で、ハイフン以降に動かしたいクラス名を入れます。公式サイト より確認してください。
<a href="#" class="hvr-grow">Grow</a>ボタン内にFont-awesomeなどのアイコンを付けて、そのアイコンに動作を入れる事もできます。
Font-awesomeを使う際のファイルは公式サイト より確認してください。
公式サイト：https://fontawesome.com/
STEP
ボタン内のアイコンを動かしたい場合
動かしたい動作のhover.cssのクラス名をaタグに付け、アイコンの方に「hvr-icon」のクラス名を指定します。
<a href="#" class="hvr-icon-forward ">
詳細はこちら
<i class="fa fa-chevron-circle-right hvr-icon "></i>
</a> STEP
Font-awesomeのアイコンにCSSを追加
指定したアイコンに疑似要素でFont-awesomeのキャラクターコードを追加します。
.hvr-icon-forward:before {
content: "\f138 ";
}Font-awesomeのcontentsのキャラクター指定
https://astronautweb.co/snippet/font-awesome/#font-awesome-list
あわせて読みたい
Complete list of Font Awesome icons with their CSS content values
Code snippet for how to use Font Awesome on any element and a full list of all the Font Awesome icons and their CSS content values. Updated to v 4.2.0
画像をマウスオーバーで動かす（imagehover.css）
エフェクトの種類で無料と有料版
CSSファイルのダウンロード
https://github.com/ciar4n/imagehover.css/archive/master.zip
公式サイトとデモ
https://www.imagehover.io/
あわせて読みたい
Imagehover.css – A Pure CSS Image Hover Library
A lovingly crafted CSS Image Hover animation Library
imagehover.cssの使い方を見る
STEP
imagehover. cssをダウンロード
STEP
headerにファイルを読み込み
設定の説明は以下。もしくは、ダウンロードファイル内のindex.htmlに記載されてます。
https://github.com/ciar4n/imagehover.css
CSSをダウンロードして配置した場合
<head>
<link rel="stylesheet" href="css/imagehover.min.css">
</head>CDNでリンクする場合
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/imagehover.css/2.0.0/css/imagehover.min.css"
/>
</head> STEP
動かしたい部分に記述する
要素に動かしたいクラス名（例：imghvr-fade）をつけます。公式サイト より確認してください。
<figure class="imghvr-fade
その他のアニメーション
他にもいくつかアニメーションのライブラリもありますので、希望の動きを探してみてください。
https://elrumordelaluz.github.io/csshake/
あわせて読みたい
CSShake
Some CSS classes to move your DOM! Easy-to-use classes that will add different kind of shake to each part of your site.
https://www.minimamente.com/project/magic/
あわせて読みたい
Magic Animations CSS3
Magic CSS are a set of simple animations to include in your web or app project’s
http://cssanimation.io/
あわせて読みたい
CSS Animation Library for Developers and Ninjas
Are you looking for css animation? Don’t know how to use css3 keyframe also css transition, want to design websites with animation? Follow us to have all soluti…
最後に…
WEBサイトのページレイアウトでは、ヘッダーからスクロールしていき、最後のフッターに行くまで読み飽きない為の「リズム」が必要です。画像やテキストの位置、色もそうですが、アクセントで動きを入れるのも効果的。CSSのライブラリの他にもJavascriptのものもあるので、簡単にハイクオリティな表現ができます。
