こんにちは。アイレットデザイン事業部のマークアップエンジニアの鶴若と申します。
簡易的なアニメーションを指定するのに非常に安易にできるSASSでのCSSアニメーションライブラリであるMotion UIについて説明していきたいと思います。

インストール

npm install motion-ui || yarn add motion-ui

必要ファイルの読み込み

import用に「node_modules/motion-ui/src」までのパスを通します

※パスを通さなくても「node_modules/motion-ui/src」参照できればこのステップは省略しても構いません。
例：gulpの場合

.pipe(gulpDartSass({
  includePaths: ['node_modules/motion-ui/src']
}))

scssファイルに必要なファイルを読み込みます

@import 'motion-ui';
@include motion-ui-transitions;
@include motion-ui-animations;

##　利用するJSファイルにインポートします

import MotionUI from 'motion-ui'

（jqueryも利用できるので必要なら別途importしてください）

用意されているCSSのクラス

アニメーションの初期設定

  • Speed: 500ms
  • Timing: Linear
  • Delay: 0s

Transition

Slide:

  • .slide-in-down
  • .slide-in-left
  • .slide-in-up
  • .slide-in-right
  • .slide-out-down
  • .slide-out-left
  • .slide-out-up
  • .slide-out-right

Fade:

  • .fade-in
  • .fade-out

Hinge:

  • .hinge-in-from-top
  • .hinge-in-from-right
  • .hinge-in-from-bottom
  • .hinge-in-from-left
  • .hinge-in-from-middle-x
  • .hinge-in-from-middle-y
  • .hinge-out-from-top
  • .hinge-out-from-right
  • .hinge-out-from-bottom
  • .hinge-out-from-left
  • .hinge-out-from-middle-x
  • .hinge-out-from-middle-y

Scale:

  • .scale-in-up
  • .scale-in-down
  • .scale-out-up
  • .scale-out-down

Spin:

  • .spin-in
  • .spin-out
  • .spin-in-ccw
  • .spin-out-ccw

Animation

  • .shake: 左右に揺らす
  • .wiggle: 前後に揺らす
  • .spin-cw: 時計回りに1回回転させる
  • .spin-ccw: 反時計回りに1回回転させる

Modifier

Speed:

  • .slow (750ms)
  • .fast (250ms)

Timing:

  • .linear
  • .ease
  • .ease-in
  • .ease-out
  • .ease-in-out
  • .bounce-in
  • .bounce-out
  • .bounce-in-out

Delay:

  • .short-delay (300ms)
  • .long-delay (700ms)

Animationについては対象オブジェクトにクラスを付与するだけで使用できますが、
それ以外はJSやSCSSで設定する必要があります。

使用方法

Transitionを使用

javascriptで用意クラスを付与する事で使用できます。

html

<div class="element">
  fade-in
</div>

javascript

MotionUI.animateIn('.element', 'fade-in')
MotionUI.animateIn('.element', 'fade-in', ()=> {
  console.log('コールバックを設定する事もできます')
})

// animateOutを設定する事で対象オブジェクトを display: none; になります。
MotionUI.animateOut('.elm2', 'fade-in')

.fade-in-long {
  @include mui-fade(in, $duration: 10s);
}

MotionUI.animateIn('.element', 'fade-in-long')

Animationを使用

クラスを付与する

一番簡単な方法としてはAnimationのクラスを対象に付与する形です。

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

Modifierのクラスを追加で付与する事もできます。

<div class="shake slow ease short-delay">shake</div>

SCSSで設定する

@include mui-animation()に下記の関数を入れて設定します。
複数の関数を指定することが可能です。
設定する場合追加としてanimation-durationを指定しないと動かないです。

  • fade($from, $to)
  • hinge($state, $from, $axis, $perspective, $turn-origin)
  • shake($intensity)
  • slide($state, $direction, $amount)
  • spin($state, $direction, $amount)
  • wiggle($intensity)
  • zoom($from, $to)

下記の例は、ホバー時に回転しながら拡大してアニメーション終了時にそのフレームで止まる例です。

.hover-spin-zoom {
  &:hover {
    @include mui-animation(spin, zoom(1, 1.2));
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
  }
}

子のアニメーションを一括指定する

下記のように設定すると対象のオブジェクトないの子のアニメーションを一括で指定することができます。
注意点としては、複数のmui-series()を設定する場合その中のクラス名は、
別のmui-series()の中のものと被らないようにしてください。

HTML

<div class="animation-wrapper">
  <div class="animete-shake">shake</div>
  <div class="animete-spin">spin</div>
  <div class="animete-wiggle">wiggle</div>
</div>

SCSS
mui-queue(再生時間, 次のアニメーションまでの待機時間, アニメーションの関数（複数指定可）)

@include mui-series() {
  .animete-shake     { @include mui-queue(2s, 0s, shake()); }
  .animete-spin      { @include mui-queue(1s, 2s, spin()); }
  .animete-wiggle    { @include mui-queue(wiggle); }
}
// 開始の遅延時間を引数として、下記の形式で入れることができます。
@include mui-series(2s) {...}

javascript

document.querySelector('.animation-wrapper').classList.add('is-animating');

読み込み時に再生させるのであれば、javascriptでクラス付与をせず下記のように、
最初から付与しておく形でも問題ありません。

<div class="animation-wrapper is-animating">

このライブラリは、複雑なアニメーションを設定するにはあまり向いているとは言えませんが、ボタンなどのにマイクロインタラクションやタイトルのロゴの登場などのちょっとしたアニメーションを指定するのにとても向いていると思うので試してみてはいかがでしょうか。