transition-timing-function（トランジション・タイミング・ファンクション）プロパティは、変化の流れ（変化の仕方）を指定します。
transition-timing-function（トランジション・タイミング・ファンクション）プロパティには五つの動きが準備されています。それぞれの動きを確認しましょう。
- ease：開始と終了が滑らかに動く
- linear：一定の動き
- ease-in：ゆっくり始まる
- ease-out：ゆっくり終わる
- ease-in-out：ゆっくり始まり、ゆっくり終わる
上記の動きを下記のhtmlで確認します。
|
1 2 3 4 5 6 7 |
<ul class="timing-function"> <li>ease</li> <li>linear</li> <li>ease-in</li> <li>ease-out</li> <li>ease-in-out</li> </ul> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.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;} |
各値の動きを確認できるバーを作りました。動きを見比べてください。
- ease
- linear
- ease-in
- ease-out
- ease-in-out