Animate.cssで間隔を調整する



最近HPを作成する仕事が入ってきました。
そこまでがんばらなくても良いのですが、少しだけ動きを付けたいということで、少し古いのですが、
[Animate.css](https://daneden.github.io/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ということで、
表計算ソフト登場
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308228/6affd87f-5ce0-fd53-3280-8940437adf48.png)

- 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;

}

```


以上で終わり。