HTML DOM スタイルの animationTimingFunction プロパティとは？使い方と値を徹底解説
animationTimingFunction プロパティは、アニメーションが1サイクルの中でどのように進行するかを指定するために使用されます。具体的には、アニメーションの速度カーブ（イージング）を設定または取得します。速度カーブとは、アニメーションがある状態から別の状態へ移行するまでの時間の進み方を定義するもので、これによってトランジションの滑らかさが決まります。
構文（Syntax）
animationTimingFunction プロパティを設定する場合の構文は以下のとおりです。
object.style.animationTimingFunction = "linear|ease|ease-in|ease-out|cubic-bezier(n, n, n, n)|initial|inherit"
設定できる値
animationTimingFunction プロパティに指定できる主な値は以下のとおりです。
| 番号 | 値と説明 |
|---|---|
| 1 | linear アニメーションの開始から終了まで、一定の速度で進行することを指定します。 |
| 2 | ease デフォルト値です。アニメーションの開始と終了はゆっくりで、中盤が速く進行します。 |
| 3 | ease-in アニメーションがゆっくりと始まります。 |
| 4 | ease-out アニメーションがゆっくりと終わります。 |
| 5 | ease-in-out アニメーションの開始時と終了時の両方がゆっくり進行します。 |
| 6 | cubic-bezier(n, n, n, n) 独自の値で3次ベジェ関数（cubic-bezier）を定義し、自由にイージングをカスタマイズできます。 |
| 7 | initial このプロパティを初期値に設定します。 |
| 8 | inherit 親要素のプロパティ値を継承します。 |
サンプルコード
それでは、animationTimingFunction プロパティの使用例を見てみましょう。以下の例では、ボタンをクリックすると、線形（linear）だったアニメーションのタイミングが「ease」に変更されます。
<!DOCTYPE html>
<html>
<head>
<style>
#PARA1{
border: 2px solid black;
position: relative;
animation: demo 5s infinite;
animation-timing-function: linear;
}
@keyframes demo {
from {background-color: lightcoral; color:black;}
to {background-color: indigo; color:white;}
}
</style>
<script>
function timingChange(){
document.getElementById("PARA1").style.animationTimingFunction="ease";
document.getElementById("Sample").innerHTML="アニメーションのタイミングが ease に変更されました。";
}
</script>
</head>
<body>
<p id="PARA1">
Lacus vel facilisis volutpat est velit. Id interdum velit laoreet id donec ultrices.
Praesent semper feugiat nibh sed pulvinar proin gravida hendrerit. Viverra nibh cras
pulvinar mattis nunc sed blandit libero.</p>
<p>下のボタンをクリックすると、上のアニメーションのタイミングが変更されます</p>
<button onclick="timingChange()">CHANGE TIMING</button>
<p id="Sample"></p>
</body>
</html>
実行結果
このコードを実行すると、次のような出力が得られます。
「CHANGE TIMING」ボタンをクリックすると、アニメーションの速度カーブが「ease」に変わり、動きの印象が変化します。
まとめ
animationTimingFunction プロパティを使うことで、JavaScript から動的にアニメーションの進行速度を制御できます。linear や ease といった基本的なキーワードに加え、cubic-bezier 関数を使えば細かいイージング調整も可能です。Web アニメーションに自然な動きやアクセントを加えたいときに、ぜひ活用してみてください。
-
HTML DOM スタイル animationPlayState プロパティの使い方を解説
animationPlayState プロパティは、CSS アニメーションの状態（実行中か一時停止中か）を取得・設定するために使用されます。このプロパティを活用することで、JavaScript からアニメーションの再生と一時停止を動的に切り替えることができ、インタラクティブな Web ページの作成に非常に便利です。 構文 animationPlayState プロパティを設定する場合の構文は以下の通りです。 object.style.animationPlayState = running|paused|initial|inherit; 設定できる値 animationPlayState プロ
-
HTML DOM スタイルの animationIterationCount プロパティとは？使い方と設定方法を解説
animationIterationCount プロパティは、CSS アニメーションが再生される回数を設定または取得するために使用される HTML DOM のスタイルプロパティです。このプロパティを使うことで、JavaScript から動的にアニメーションの繰り返し回数を制御できます。 構文（Syntax） animationIterationCount プロパティの基本的な構文は以下の通りです。 ■ animationIterationCount プロパティを設定する場合： object.style.animationIterationCount = number|infinite|init