Animate.cssの開始時間（Delay）アニメーション時間（Dulation）動作幅を調整する方法

ちょっとしたアニーメーションを付けるのに便利なAninmate.css ですが、実際に取り込んでみると、アニメーションの開始タイミングや、アニメーション時間、アニメーションの動作幅など、調整したいことも多々あるかと思います。

下記はbounceInというアニメーションを使っていますが、もう少しアニメーションの動作幅を控えめにしたいですよね。

テスト（デフォルト）

テスト（調整後）

「Webサイトからお問い合わせが来ない…」とお悩みの方必見！
当サイトのノウハウを詰め込んだ『Web集客の無料ガイド』をご提供

詳細はこちら

使い方

Animate.cssの使い方はいたってシンプルです。

Animate.css サイトより、animate.cssファイルをダウンロードします。
ダウンロードしたCSSファイルを読み込む
```
<link rel="stylesheet" href="animate.min.css">
```
アニメーションを付与した箇所にアニメーション名とanimatedクラスを追加する
例：bounceInを追加したい場合
<h1 class="bounceIn animated">テスト</h1>

調整方法

開始時間、アニメーション時間の調整

アニメーションの開始時刻や、アニメーションする時間の調整は下記のクラスを追加するだけです。

（例）

<p class="bounceIn animated" id="animate">テスト</p>

CSS

p#animate {
  animation-duration: 2s; /* アニメーションの時間 */
  animation-delay: 2s; /* アニメーション開始時間 */
  animation-iteration-count: infinite; /* アニメーションの繰り返し回数 */
}

動作幅の調整

動作幅の調整は直接CSSファイルの修正を行うか、使うクラスをコピーしてCSSを上書きする必要があります。
それではbounceInを例に調整方法をご紹介します。

animate.cssを開くと下記の行があります。

@-webkit-keyframes bounceIn { }

@keyframes bounceIn { }

この二つがbounceInのアニメーションを行っています。
@-webkit- は、ベンダープレフィックスと呼ばれているもので、iOS8以下やAndroid4.4.4以下対応する場合は修正が必要です。必要ない場合はソースごと消しても大丈夫です。

bounceIn{ } の中は下記が書かれています。

  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
 
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
 
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
 
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
 
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
 
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
 
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

アニメーションの開始時 from(0%) 〜アニメーションの終了時 to（100%）まで、transform: scale3d(1,1,1); で動作が書かれています。

scale3d() は、空間での拡大縮小を行うCSS関数です。

構文：scale3d(sx, sy, sz)
sx
　拡大縮小ベクトルの横座標を表す
sy
　拡大縮小ベクトルの縦座標を表す
sz
　拡大縮小ベクトルの Z成分を表す

細かいことを気にせず、アニメーションの幅を縮めたい場合は、数値を1に近づける、アニメーションの幅を広げたいのあれば数値を1から遠ざければOKです。

実際に心地よい数値を入れ替えてみてください。

（例）

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
 
  }
 
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.98, 0.98, 0.98);
    transform: scale3d(0.98, 0.98, 0.98);
  }
 
  20% {
    -webkit-transform: scale3d(1.02, 1.02, 1.02);
    transform: scale3d(1.02, 1.02, 1.02);
  }
 
  40% {
    -webkit-transform: scale3d(0.99, 0.99, 0.99);
    transform: scale3d(0.99, 0.99, 0.99);
  }
 
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.01, 1.01, 1.01);
    transform: scale3d(1.01, 1.01, 1.01);
  }
 
  80% {
    -webkit-transform: scale3d(0.99, 0.99, 0.99);
    transform: scale3d(0.99, 0.99, 0.99);
  }
 
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

テスト（デフォルト）

テスト（調整後）