transition-timing-functionプロパティは、トランジション（遷移）の進行速度の変化を指定します。このプロパティを使うことで、アニメーションのスピードを自然にしたり、一定にしたりすることができます。トランジションはマウス、カーソルが重なることで適用されるアニメーションです。
transition-timing-functionの値とその効果の一覧
- ease: 遷移の最初と最後が緩やかになり、中間が速くなる。
- linear: 遷移が一定のスピードで進む。
- ease-in: 遷移の最初が遅く、最後が速くなる。
- ease-out: 遷移の最初が速く、最後が遅くなる。
- ease-in-out: 遷移の最初と最後が遅く、中間が速くなる。
注意点と関連情報
transition-timing-functionは、アニメーションの進行を制御し、より自然で魅力的な動きを作り出すために使用します。easeは一般的によく使われるデフォルトの設定ですが、動きのタイミングに応じて他の値を使い分けることが推奨されます。
transition-timing-functionが効かない時の原因と対策
transitionやtransition-propertyが正しく設定されていない
transition-timing-functionは、トランジションの速度の変化を制御しますが、transitionやtransition-propertyが正しく設定されていない場合、タイミング関数は効果を発揮しません。
対策: まず、transitionやtransition-propertyが適切に設定されていることを確認します。例えば、transition: all 0.5s ease;やtransition-property: opacity; transition-timing-function: ease;のように設定し、トランジションが正しく適用されているか確認します。
共通するCSSコード
.css-sample-container {
padding: 20px;
border: 1px solid #ccc;
margin-bottom: 20px;
width: 300px;
background-color: #f9f9f9;
text-align: center;
}
.css-sample-box {
width: 100px;
height: 100px;
background-color: #4CAF50;
margin: 0 auto;
transition: transform 1s;
}
.css-sample-box:hover {
transform: scale(1.5);
}transition-timing-function: ease
最も一般的な遷移で、遷移の最初と最後が緩やかで、中間が速くなります。マウスを重ねて確認してください。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-box css-sample-timing-ease"></div>
</div>CSSコード
.css-sample-timing-ease {
transition-timing-function: ease;
}表示結果
transition-timing-function: linear
遷移が一定のスピードで進行します。アニメーションの速度が変わらないため、滑らかな動きが期待できます。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-box css-sample-timing-linear"></div>
</div>CSSコード
.css-sample-timing-linear {
transition-timing-function: linear;
}表示結果
transition-timing-function: ease-in
最初はゆっくり始まり、最後に速くなる遷移です。要素がゆっくりと動き出す動作に適しています。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-box css-sample-timing-ease-in"></div>
</div>CSSコード
.css-sample-timing-ease-in {
transition-timing-function: ease-in;
}表示結果
transition-timing-function: ease-out
最初に速く始まり、最後に遅くなる遷移です。急に動き出して、徐々に静止するような動きになります。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-box css-sample-timing-ease-out"></div>
</div>CSSコード
.css-sample-timing-ease-out {
transition-timing-function: ease-out;
}表示結果
transition-timing-function: ease-in-out
最初は遅く、中間が速く、最後にまた遅くなる遷移です。自然な動きに見えるため、アニメーションに多用されます。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-box css-sample-timing-ease-in-out"></div>
</div>CSSコード
.css-sample-timing-ease-in-out {
transition-timing-function: ease-in-out;
}表示結果
まとめ
- transition-timing-functionは、遷移の進行速度を制御します。
- easeは、遷移の最初と最後が遅く、中間が速くなる一般的な設定です。
- linearは、一定のスピードで遷移が進みます。
- ease-inは、最初が遅く、最後に速くなる遷移です。
- ease-outは、最初が速く、最後に遅くなる遷移です。
- ease-in-outは、最初と最後が遅く、中間が速くなる遷移です。