2019年11月07日(木)

CSS transition-timing-function プロパティ

transition-timing-function（トランジション・タイミング・ファンクション）プロパティは、変化の流れ（変化の仕方）を指定します。

transition-timing-function（トランジション・タイミング・ファンクション）プロパティには五つの動きが準備されています。それぞれの動きを確認しましょう。

ease：開始と終了が滑らかに動く
linear：一定の動き
ease-in：ゆっくり始まる
ease-out：ゆっくり終わる
ease-in-out：ゆっくり始まり、ゆっくり終わる

上記の動きを下記のhtmlで確認します。

<ul class="timing-function">
<li>ease</li>
<li>linear</li>
<li>ease-in</li>
<li>ease-out</li>
<li>ease-in-out</li>
</ul>

.timing-function {
  text-align: right;
  }

.timing-function li {
  margin: 0px 0px 10px 400px;
  font-size: 1.6rem;
  font-weight: bold;
  padding: 3px 5px;
  color: #fff;
  background-color: #000;
  text-align: left;
  }

.timing-function:hover li {
  margin: 0px 0px 10px 0px;
  }

.timing-function li.li01 { transition: 3s ease;}
.timing-function li.li02 { transition: 3s linear;}
.timing-function li.li03 { transition: 3s ease-in;}
.timing-function li.li04 { transition: 3s ease-out;}
.timing-function li.li05 { transition: 3s ease-in-out;}

各値の動きを確認できるバーを作りました。動きを見比べてください。