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

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

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

テスト(デフォルト)

テスト(調整後)

 

使い方

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

  1. Animate.css サイトより、animate.cssファイルをダウンロードします。
     
  2. ダウンロードしたCSSファイルを読み込む
    <link rel="stylesheet" href="animate.min.css">
  3. アニメーションを付与した箇所にアニメーション名と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);
  }
}

テスト(デフォルト)

テスト(調整後)

関連タグ: 

この記事をシェアする:

Author
この記事を書いた人:阿部 正幸

KDDIウェブコミュニケーションズ
クラウドホスティング事業本部 エバンジェリスト

CPIスタッフブログ編集長。ACE01,SmartReleaseをリリース後、現職の「エバンジェリスト」として、web制作に関する様々なイベントに登場

Line@登録よろしくお願いします

Web制作に関する情報や、CPIノベルティのプレゼント、サーバーの無償提供などを定期的に発信しています。
ぜひ、登録ください。