アニメーション

## transitionでアニメーションをさせてみよう

【正方形のボックスを〇に変化させたいとき】
.box:hoverに`border-radius:50%を指定。

それだけだとパッと切り替わるだけなので、変化の保管をするため

.boxに
`transition-property: border-radius;
  transition-duration: 1s;`

👆boxにtransitionで中間を補完するプロパティはborder-radiusで、
それにかかる時間は１秒だよという意味


## transformプロパティを使ってみよう

ーよく使われる種類ー
・移動　　　　transform:translate(10px, 10px); XY指定可
・回転       transform:rotate(10deg);
・リサイズ   transform:scale(2,0.5);  XY指定可　縦に二倍、横に半分

❕複数指定する場合は注意が必要❕
rotateの後にtranslateを指定すると、回った後に移動する。
translateの後にrotateを指定すると、移動した後に回転する。


## transform-originで動きの起点を変更しよう

ーrotateまたはscaleの起点を変えるー
左上を起点にしたいとき
`.box{
transform-origin:top left;
}`
を指定する。

❕transform-originは変形後だけに指定したいわけではないため
：hoverではなく.boxに指定する。


## transition-propertyを使ってみよう

・boxのカラーをホバーしたときに変えたい
・boxに２つ以上アニメーションをつけたいとき

`.box {
  width: 100px;
  height: 100px;
  background: orange;

  transition-property: transform, background;
   transition-property: all; ←すべてにアニメーションをつけたいときはall
  transition-duration: 1s;
}

.box:hover {
  transform: translateX(30px); 
  background: skyblue;
}`


🌟２つ以上transition-propertyに指定したいときはカンマ区切りにする

🌟リロードしたときに色が変わるchromeのバグは
　`<script> </script>`のタグをボディの最下部に入れる。
　scriptの中は半角空白を入れる。


## transitionの時間を制限しよう

・アニメーション開始までの時間を遅らせたいとき

```
.box {
  width: 100px;
  height: 100px;
  background: orange;
  
  transition-property: transform;
  transition-duration: .3s; ←アニメーションの時間（大体0.3s）
   transition-delay: 1s; ←１秒遅らせる
}

.box:hover {
  transform: translateX(30px); 
}
```


## transition-timing-functionを使ってみよう

・アニメーションの速度に緩急をつけたい（あんまり使うことない）

ease　規定値
ease-out 小さな部品　素早く動く
ease-in-out 大きな部品　ゆっくり動く
liner　ローディングアイコンなど　等速で動いてほしいとき用


## デベロッパーツールで細かい調整をしてみよう


`transition-timing-function`をつけたところを開いて
スピードの編集ができる


## transitiionの一括指定プロパティを使おう

・一括で指定したいとき

❕一括していの場合は順不同かつ省略可

`transition-property: transform;
  transition-duration: .3s;
  transition-timing-function: ease-out;`

👆このような場合は👇のように省略できる
`transition: transform .3s ease-out 1s`

・複数のプロパティを一括で指定したいとき

例えば上記にhoverするとbackgroundが変わる指定にする
👇カンマ区切りで追加できる

`transition: transform .3s ease-out 1s, background .5s;`


## ＠keyframesを設定してみよう
・高度なアニメーションの設定をしたいとき

１.　＠keyframesの後に好きな名前を付ける（moveなど）
２.　アニメーション開始から何％経過したときにどうなってほしいかを書く
３.　boxにanimation-nameを追加する。

```
.box {
  width: 100px;
  height: 100px;
  background: orange;
  
  animation-name: move;
  animation-duration: 2s;
}

@keyframes move {
  0% {
    transform: none;
  }
  80% {
    transform: translateX(200px) rotate(360deg);
  }
  100% {
    transform: translateX(300px) rotate(360deg);
  }
}
```


## アニメーションを細かく制御しよう

・アニメーションが終わった後、戻らないようにする

`animation-fill-mode:forwards;`

・アニメーションを繰り返したいとき
`animation-iteration-count:2;`←２回繰り返す
`animation-iteration-count:infinite;`←無限に繰り返す


## 再生順を制御してみよう
👇全て@keyframesではなくboxにつける

・動かしたアニメーションを折り返す
`animation-direction:alternate` 

・逆再生
`animation-direction:reverse`

・逆再生で折り返す
`animation-direction:alternate-reverse` 

・すべてのキーフレーム間のアニメーションを同じにする

・`animation-timing-function:liner;`←ロボットのようになる


## animationの一括指定プロパティを使おう

`animation: move 2s infinite 1s;`

animetionでまとめることができる。

時間はdurationが先でdelayが後


## ふわっと色が変わるボタンを作ろう


```
.btn {
  padding: 16px 32px;
  background: hsl(200, 100%, 40%);
  color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  
  transition: background .3s;
}

.btn:hover {
  background: hsl(200, 100%, 45%);
}
```


## ローディングアイコンを作ろう
```
<div class="loading"></div>

.loading {
  width: 40px;
  height: 40px;
  border: 8px solid #ccc;
  border-right-color: transparent; ←右の線を消す
  border-radius: 50%;
  
  animation: spin .8s infinite linear;
}

@keyframes spin {
  0% {
    transform: none;
  }
 100% { 
    transform: rotate(360deg);
  }
```


## ポップアップアニメーションを動かそう

・ふわっと出てきてふわっと消えるポップアップ
```
<div class="message">Hello!</div>

.message {
  width: 300px;
  padding: 8px 16px;
  background: #2c2c2c;
  color: #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
  position: fixed;
  right: 32px;
  bottom: 32px;

  animation: popup 2s forwards; ←forwardsで戻らないようにする
}

@keyframes popup {
  0% {
    transform: translateY(20px);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  20%, 80% {
    transform: none;
    opacity: 1;
  }
  100% {
    transform: translateY(20px);
    opacity: 0;
　　pointer-events:none;　←🌟
  }
}
```

🌟下にボタンがある場合重なった部分が押せなくなってしまうため
100%のところにpointer-events:none;と書く！