Transition［トランジションアニメーション］

transitionを使えば、ある状態から別の状態へ滑らかに変化させることができます

transition と animation の違い

animation は、連続したアニメーションを作成するためのもの
@keyframesで、変化していく形状などを記述する
アニメーションがループする回数や、アニメーション終了後の状態など、詳細設定ができる

transitionプロパティ

transition-property ：アニメーションさせるプロパティを指定
transition-duration ：時間（アニメーションが動いている間）
transition-timing-function ：タイミング
transition-delay ：時間（アニメーションが開始するまでの間）

初期値

transition-property: none;
transition-duration: 0s
transition-timing-function: ease;
transition-delay: 0s;

transition: none 0s ease 0s;

transition-property

値	説明
all	変化を適用できるプロパティすべてが変化する（初期値）
none	どのプロパティも変化しない
プロパティ名	変化させるプロパティ名のリストをカンマ（ , ）区切りで指定

all（background、width、heightのすべてにアニメーションが適応される）
widthだけ（widthだけにアニメーションが適応される）

transition-duration

値	説明
◯s	◯秒
◯ms	◯ミリ秒（1000ミリ秒 =１秒）

transition-timing-function（イージング）

transition-timing-functionは変化速度のパターンを変更するプロパティ

値	解説
ease	加速をつけて、ゆっくりと始まりゆっくりと終わる（初期値）
linear	最初から最後まで一定の速度で変化する
ease-in	ゆっくりと始まり、一定速度で終わる
ease-out	一定速度で始まり、ゆっくりと終わる
ease-in-out	ゆっくりと始まり、ゆっくりと終わる

index.html

<div class="content">
  <h3>transition-timing-function</h3>
  <ul class="timing">
    <li class="circle t01">ease</li>
    <li class="circle t02">linear</li>
    <li class="circle t03">ease-in</li>
    <li class="circle t04">ease-out</li>
    <li class="circle t05">ease-in-out</li>
  </ul>
</div><!-- /.content -->

style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
  list-style: none;
}
.content {
  margin: 50px;
  padding: 10px;
  border: 1px solid #aaa;
}
h3 {
  margin-bottom: 20px;
}
.circle {
  width: 100px;
  height: 100px;
  margin: 20px;
  background: #197df2;
  border-radius: 50%;
  color: #fff;
  font-weight: bold;
  text-align: center;
  line-height: 100px;
}

/* transition-timing-function */
.timing li{
  position: relative;
  left: 0;
}
.timing:hover li {
  left: 70%;
}
  .t01{
    transition: left 3s ease;
  }
  .t02{
    transition:left 3s linear;
  }
  .t03{
    transition:left 3s ease-in;
  }
  .t04{
    transition:left 3s ease-out;
  }
  .t05{
    transition:left 3s ease-in-out;
  }

マウスホバー時に背景色を変更（3秒間で）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transition</title>
<style>
button {
  width: fit-content;
  padding: 10px 40px;
  background-color: #0d96a5;
  border: none;
  color: white;
  font-size: 20px;
  transition-duration: 2s;
}
button:hover {
  background-color: #c9cd0c;
}
</style>
</head>
<body>
<button>css transition</button>
</body>
</html>