Animate.cssで間隔を調整する

最近HPを作成する仕事が入ってきました。
そこまでがんばらなくても良いのですが、少しだけ動きを付けたいということで、少し古いのですが、
Animate.cssで動きを付けました。

導入

導入は簡単。
上記サイトの「Download Animate.css」をクリックすれば、CSSが表示されるので、それをlinkタグで読み込むだけ。

 <link rel="stylesheet" href="css/animate.css">

動かしたい要素にクラスを付与

<h1 class="animated flip" id="top_title">Enjoy</h1>

これだけで動きます。
今回はflipにしてみました。
ただし、これだけだといっかいぐるりと回るだけ。

永遠に動き続けるようにする

style当てます。animation-iteration-countをinfiniteにしてあげれば、ずっと動くようになります。

# top_title{
/* X回繰り返す */
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}

これだと、ひたすら回り続ける上、終了直後に開始され、しつこい動きになってしまいます。
そこで、時間間隔をあけるようにします。

まずは、一回の動きが何秒かけて動かしたいかを考えます。
いろいろ試したところ2秒だと綺麗な動きをたもてたまま、焦った印象もなく期待通りの1回の動きをしてくれましたので、animation-durationを2sにしました。

# top_title{
/* X回繰り返す */
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;

/* X秒かけてアニメーションする */
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;

}

次に、終了から開始の間隔を調整したいところですが、
animate.cssをみてみるとこんな記載が。

@keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

40%⇨50％⇨80％⇨to(100%)で動きが調整されています。
この割合のまま動いてくれた上で、終了から開始までの間隔を付けてあげればOKということで、
表計算ソフト登場

• duration(s)が2秒の場合の40%,50%,80%,100%の秒数はそれぞれ0.8秒,1秒,1.6秒,2秒ということがわかります。
• duration(s)を仮に5秒、6秒、7秒、8秒にした場合も計算してみました。
• 格duration(s)の際に0.8秒,1秒,1.6秒,2秒が何％に当たるのかも計算。
• duration(s)が5秒の場合は0.8秒は16%、1秒は20%.......
• 今回の場合は5秒と8秒が比較的綺麗な数値になったので、どちらかにしようと思います。
• まぁ、5秒に1回動くようなものならOKなので今回は5秒のdurationでやってみます。

ということで、CSSを変更

# top_title{
/* X回繰り返す */
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;

/* X秒かけてアニメーションする */
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
-ms-animation-duration: 5s;
-o-animation-duration: 5s;
animation-duration: 5s;

}

さらにこの計算結果にあわせて@keyframes flipも変えてあげます。

@keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  16% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  20% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  32% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

動きのイメージとしては、40％になったら、toと同じ値をぶこんであげれば、それ以降は動かないで残りの60％を過ごしてくれるイメージ

これで、ほぼほぼ完了。

動き出す秒数を考える。

私の場合、bootstrapを使って、読み込み時に画面サイズを調整していました。
読み込み時点で、このアニメーションが動くと、それに合わせて、画面サイズを調整してしまっていたので、
アニメーションが動き出す秒数をanimation-delayで調整。1秒あれば、読み込み完了するでしょうという適当名考えで1sにしました。

# top_title{
/* X回繰り返す */
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;

/* X秒かけてアニメーションする */
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
-ms-animation-duration: 5s;
-o-animation-duration: 5s;
animation-duration: 5s;

/* X秒おいてからアニメーションする */
-webkit-animation-delay: 1s;
-moz-animation-delay:1s;
-ms-animation-delay:1s;
-o-animation-delay:1s;
animation-delay:1s;

}

以上で終わり。