ちょっとしたアニーメーションを付けるのに便利なAninmate.cssですが、実際に取り込んでみると、アニメーションの開始タイミングや、アニメーション時間、アニメーションの動作幅など、調整したいことも多々あるかと思います。
下記はbounceInというアニメーションを使っていますが、もう少しアニメーションの動作幅を控えめにしたいですよね。
テスト（デフォルト）
テスト（調整後）
使い方
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);
}
}
テスト（デフォルト）
テスト（調整後）
