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;と書く！