HTML DOM StyleのtransitionTimingFunctionプロパティとは？構文と使い方を徹底解説
HTML DOM Style の transitionTimingFunction プロパティは、要素に適用されるトランジション（遷移）効果の速度曲線を表す関数を、取得および変更するためのプロパティです。このプロパティを活用することで、アニメーションの加速・減速のタイミングを細かく制御でき、より自然で洗練された動きを実現できます。
構文
transitionTimingFunction プロパティの基本的な構文は以下のとおりです。
1. 値を取得する場合
object.transitionTimingFunction
2. 値を設定する場合
object.transitionTimingFunction = "ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() | initial | inherit"
設定できる主なキーワードとその特徴は以下のとおりです。
- ease：ゆっくり始まり、中盤で速くなり、最後にゆっくり終わる既定値
- linear：始めから終わりまで一定の速度で変化する
- ease-in：ゆっくりとした速度で開始し、徐々に加速する
- ease-out：速い速度で開始し、徐々に減速して終了する
- ease-in-out：ゆっくり始まり、ゆっくり終わる滑らかな動き
- cubic-bezier()：4つの数値を指定して独自の速度曲線を定義できる
- initial：プロパティを初期値に戻す
- inherit：親要素の値を継承する
それでは、HTML DOM Style transitionTimingFunction プロパティの具体的な使用例を見てみましょう。
実行例
次のサンプルコードでは、ボタンをクリックすると赤い正方形に transitionTimingFunction の値が設定され、その後マウスカーソルを重ねるとトランジション効果が確認できます。
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem 0;
}
.circle {
height: 100px;
width: 100px;
background-color: #db133a;
}
.circle:hover {
height: 200px;
width: 200px;
border-radius: 50%;
transition: all 2s;
}
.show {
font-size: 1.2rem;
margin: 1rem 0;
}
</style>
<body>
<h1>DOM Style transitionTimingFunction Property Demo</h1>
<div class='circle'></div>
<button onclick="set()" class="btn">Set transitionTimingFunction</button>
<div class="show">Now, hover on the square</div>
<script>
function set() {
document.querySelector('.circle').style.transitionTimingFunction = "ease-in-out";
}
</script>
</body>
</html>
出力結果
「Set transitionTimingFunction」ボタンをクリックした後、「赤い」正方形の上にマウスカーソルを重ねてください。ease-in-out の速度曲線が適用された、滑らかで自然なトランジション効果を確認することができます。
-
HTML DOM スタイルの transformOrigin プロパティとは？使い方を徹底解説
HTML DOM のスタイルオブジェクトが持つ transformOrigin プロパティは、HTML ドキュメント内の要素に対して 2D または 3D 変換を行う際の「原点（基準点）」を取得・設定するためのプロパティです。要素を回転や拡大縮小させる transform プロパティと組み合わせて使うことで、変換の基準となる位置を自由にコントロールできます。構文（シンタックス）transformOrigin プロパティの基本的な構文は以下のとおりです。値の取得object.style.transformOrigin値の設定object.style.transformOrigin = 値指定できる
-
HTML DOM スタイルの quotes プロパティの使い方を徹底解説
HTML DOM の style オブジェクトの quotes プロパティは、HTML ドキュメント内で引用文を囲むために使用される引用符（クォーテーションマーク）の種類を取得・変更するためのプロパティです。主に <q> 要素や <blockquote> 要素など、引用を表す要素と組み合わせて利用されます。 構文 quotes プロパティの基本的な構文は以下のとおりです。 値の取得 object.style.quotes 値の設定 object.style.quotes = value 設定できる値 value には以下の値を指定できます。 値説明 inheri