animation timing function CSS プロパティとは
トピック：各サイクルのタイミングにわたってCSSアニメーションをどのように進めるべきかを指定する 事ができる
プロパティ animation timing function
実例 コード 1
サンプル コードを試すプロパティ 定義と使用法
| デフォルト値・初期値 : | ease |
|---|
| 適用対象 : | 全要素、::before / ::after 疑似要素 |
|---|
| 継承 : | 不可 |
|---|
| メディア : | visual |
|---|
| 計算値 : | 指定値 |
|---|
CSS Version | CSS3 |
|---|
| アニメーションの種類 : | 個別 |
|---|
| JavaScript 構文 | object.style.animationTimingFunction="funWebref" |
|---|
| 正規順序 : | 形式文法で定義される一意のあいまいでない順序 |
|---|
| CSSの構文 | animation-timing-function: linear |ease |ease-in |ease-out |ease-in-out |step-start |step-end |steps(int,start |end) |cubic-bezier(n,n,n,n) |initial |inherit; |
|---|
プロパティ値
| 値 | 説明 |
|---|
linear | アニメーションが初期状態から最終状態に一定速度で移動するように指定する |
ease | 早送りに似ていますが、冒頭でより急激に加速しますが、加速はすでにその中央付近で減速し始めます。 |
ease-in | アニメーションの開始が遅くなるように指定し、最後の状態に達してアニメーションが突然停止するまで徐々に加速します。 |
ease-out | アニメーションが素早く開始し、最後の状態に近づくと徐々に遅くなるように指定する |
ease-in-out | アニメーションがゆっくりと開始し、最終状態に近づくと加速し、その後減速するように指定する |
step-start | ステップ（1、開始）に相当 |
step-end | ステップ（1、終わり）と等価 |
steps(int,start|end) | 2つのパラメーターを持つステッピング関数を指定する 最初のパラメータは、関数の間隔の数を指定する 正の整数（0より大きい値）でなければならない オプションの2番目のパラメータは、値 "start"または "end"のいずれかであり、区間内で値の変化が発生する点を指定する 2番目のパラメータが省略された場合は、値 "end"が与えられます。 |
cubic-bezier(n,n,n,n) | 三次ベジェ曲線を定義する 速度曲線としても知られています。可能な値は、0〜1の数値です。 |
initial | このプロパティをデフォルト値に設定する |
inherit | 親要素からこのプロパティを継承する |
サポートするデスクトップ ブラウザ対応・互換性
| Property | Desktop 互換性 |
|---|
| animation timing function | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|
| 基本 サポート | フルサポート◯43 | フルサポート◯12 | フルサポート◯16 | フルサポート◯10 | フルサポート◯30 | フルサポート◯あり |
|---|
サポートするモバイル ブラウザ対応・互換性
| Property | Mobile 互換性 |
|---|
| animation timing function | Android | Chrome for Android
| Edge Mobile | Firefox for Android
| Opera for Android
| iOS Safari | Samsung Internet |
|---|
| 基本 サポート | フルサポート◯あり | フルサポート◯43 | フルサポート◯あり | フルサポート◯16 | フルサポート◯30 | フルサポート◯あり | フルサポート◯4.0 |
|---|
：animation-timing-function 関連記事 
CSS animation-timing-function | CSS プロパティ 値| 意味 使い方 実例 – WebRef