人間の目は動きを感知すると反射的に目が動き、意識をそちらに向けるそうです。そのため、アニメーションは要素をほんの少し動かすだけで注目を集められるという強い力を持っています。今回はそんなアニメーションを手軽に実装できるCSSやJavaScriptのライブラリーをいくつか紹介します。

アニメーションを使う時に気をつけたい事

アニメーションを使えば、前後の画面に繋がりを持たせたり、ユーザーに次の動きを予測させ、安心感を与えることができます。よく使われるものが、ふんわりと画面や要素を移り変えるフェードという効果です。目の前の物が一瞬で消え、パッと新しい物が現れる…なんて、現実世界ではありえませんよね。もちろん、単純に見ていて楽しい、かっこいい、なんていう刺激を与えられます。

しかし、ユーザーの注意をひこうとするあまりアニメーションを多用していると、習慣化と呼ばれる心理現象が起きてしまいます。頻繁に発生する刺激に対しては、脳が注意を払わなくなるという現象です。オオカミ少年が典型的な例ですね。

さらに、アニメーションを見るとうるさく感じてしまうユーザーもいます。対象物によっては広告と勘違いされて、無視されてしまうことも。アニメーションを実装する際は、ユーザーから好意的に見てもらえるよう、使用箇所や動作時間に気を配り、「意図のある動き」となるよう心がけましょう。

それではライブラリーをいくつか紹介します！

要素を動かす

Magic

デモ｜GitHub
ふんわりフェード、パタンと扉を開いたような動作、くるんと回転…などなど、様々なアニメーションを手軽に追加できます。

コード例

$('.yourdiv').hover(function () {
  $(this).addClass('magictime puffIn');
});

この例だと yourdiv というクラスのついた要素にカーソルを合わせると「puffIn」の効果を加えます。

Animate.css

デモ｜GitHub
こちらはCSSライブラリーなので、「JavaScriptってなんだ？？」という人でも手軽に実装できそう。animated というクラスと共に各エフェクトのクラスを加えればOK。アニメーションを繰り返し表示したい場合は infinite クラスを追加。

コード例

<h1 class="animated infinite bounce">Example</h1>

anime.js

See the Pen Basic animation – anime.js by Julian Garnier (@juliangarnier) on CodePen.

デモ｜GitHub
シンプルながら多くのオプションが用意されていて、カスタマイズ次第で細かい動作にも対応できるかと思います。他にもanime.jsのCodePenにて様々なデモが用意されています。

コード例

var myAnimation = anime({
  targets: ['.blue', '.green'],
  translateX: '13rem',
  rotate: 180,
  borderRadius: '8px',
  duration: 2000,
  loop: true
});

こちらのコードで上記デモが再現できます。HTMLとCSSはそれぞれのタブをクリックしてご覧ください。

CSShake

デモ｜GitHub
要素をガクガクブルブル震わせられます。使いドコロに悩むかもしれませんが、ちょっと目立たせたいところやエラーメッセージに瞬間的に使うとよさそうです。多用注意！

コード例

<div class="shake shake-horizontal"></div>

便利なタブにもアニメーション

ページ推移時に

Animsition

デモ｜GitHub
リンクをクリックすると、次のページに移る際に、ページ全体にフェードや回転などのアニメーションをローディング画像と共に加えられます。

コード例

<a href="#" class="animsition-link"
  data-animsition-out-class="fade-out-right"
  data-animsition-out-duration="2000"
>
  リンクテキスト
</a>

ページをスクロールすると要素が動きながら登場

ScrollTrigger

デモ｜GitHub
スクロールで、指定した div 内の要素をふんわりと表示してくれます。滑らかで気持ちいいですね。

コード例

<!-- ファイル読み込み -->
<script src="ScrollTrigger.min.js"></script>

<!-- JavaScript -->
<script>
document.addEventListener('DOMContentLoaded', function(){
    ScrollTrigger.init();
});
</script>

<!-- HTML -->
<div data-scroll>
  ここにコンテンツが入ります
</div>

AOS

デモ｜ダウンロード
HTMLの要素に data-aos 属性を記述し、アニメーション名リストから好みのものを追加すれば実装できます。

コード例

<!-- ファイル読み込み -->
<link rel="stylesheet" href="bower_components/aos/dist/aos.css" />
<script src="bower_components/aos/dist/aos.js"></script>

<!-- JavaScript -->
<script>
    AOS.init();
</script>

<!-- HTML -->
<div data-aos="fade-up" data-aos-anchor-placement="top-center">
  ここにコンテンツが入ります
</div>

ハンバーガーメニュー（≡←こんなやつ）の形を変更

Hamburgers

デモ｜GitHub
三本線で構成されたメニューアイコン、通称「ハンバーガーメニュー」にアニメーションを加え、開閉の表示を変更します。こういった細かいところにもこだわりたいですね。

コード例

<button class="hamburger hamburger--collapse" type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>

アニメーションの種類はGitHubページUsageの3.に一覧表示されています。

サムネイル画像にホバーでテキストを表示

imagehover.css

デモ｜GitHub
サムネイル画像とテキストの組み合わせはよく利用することもあると思うので、知っていると便利なライブラリーかも。アニメーションの種類も豊富です。

コード例

<figure class="imghvr-fade">
  <img src="example.jpg">
  <figcaption>
    ここにコンテンツが入ります。
  </figcaption>
</figure>

クラス名に好みのアニメーション名を記述すればOK。アニメーション名はデモページに記載されています。

こういった便利なツールを使いこなせば、アニメーションの実装に苦手意識のあった方でも手軽に始められますね。冒頭でも書いたように、使いすぎに注意しながら、ページを素敵に彩ってください！