IT用語辞典バイナリ | さくいん | サイトマップ | ヘルプ | お気に入りに追加  
CSS3リファレンス
IT用語辞典バイナリ<パソコン用語・コンピュータ辞書>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
拡張子辞典<ファイル・変換・変更・表示>
HTML5タグリファレンス
CSS3リファレンス
HTML5 JavaScript API
エクセル関数リファレンス
ITパスポート試験
 
  
  IT用語辞典バイナリ > CSS3リファレンス > アニメーション > animation-timing-functionの解説
  カテゴリ別さくいん
  タグ別さくいん

animation-timing-functionの解説

アニメーションの補間方法を指定するには?

要素書式

animation-timing-function: 【補間方法】 [, 【補間方法】...];

対応ブラウザ

  • IE 9:×
  • Firefox 10.0:○(-moz-animation-timing-function)
  • Opera 11.61:×
  • Chrome 17.0:○(-webkit-animation-timing-function)
  • Safari 5.1:○(-webkit-animation-timing-function)

    ※現在、動作にベンダープレフィックスが必要なブラウザは、括弧内にベンダープレフィックス付のプロパティを記載しています。
    ブラウザWindows 7上で動作確認を行っています。
    ユーザーの設定より、異なる挙動をする場合があります。

値一覧

アニメーションの再生速度の変化の仕方(中間の値の補間方法)には以下の値が指定できます。(これらをタイミング関数とも呼びます)

値の種類と意味は、トランジションの補間方法を指定するには?と共通です。

内容
ease開始付近と終了付近の変化を滑らかにします。cubic-bezier(0.25, 0.1, 0.25, 1.0)と同じ。省略時の既定値です。
linear一定の割合で直線的に変化させます。cubic-bezier(0.0, 0.0, 1.0, 1.0)と同じ。
ease-in開始付近の変化を緩やかにします。cubic-bezier(0.42, 0, 1.0, 1.0)と同じ。
ease-out終了付近の変化を緩やかにします。cubic-bezier(0, 0, 0.58, 1.0)と同じ。
ease-in-out開始付近と終了付近の変化を緩やかにします。cubic-bezier(0.42, 0, 0.58, 1.0)と同じ。
cubic-bezier(x1, y1, x2, y2)変化に掛かる時間をX軸で1、変化の総量をY軸で1としたとき、起点の次の制御点を(x1,y1)、
終点の前の制御点を(x2, y2)とする三次ベジェ曲線にしたがって値を変化させます。
x1、y1、x2、y2はすべて 0 から 1 の間の実数です。
step-start開始時点で終了状態の値に変化します。steps(1, start)と同じ。Operaは未実装。
step-end終了時点まで変化せず、終了時点で終了状態の値に変化します。steps(1, end)と同じ。Operaは未実装。
steps(ステップ数, ディレクション)時間的変化を「ステップ数」の数のステップに等分に区切って不連続に変化させます。
「ステップ数」は 1 以上の整数です
「ディレクション」にキーワードstartが指定されたときは、起点で最初のステップが起きます。
キーワードendが指定されたときは、終点で最後のステップが起きます
Operaは未実装。

解説文

CSSアニメーションでは、プロパティの値を時間的に変化させることで、要素をアニメーションさせます。

アニメーションの再生内容となる、プロパティの時系列での変化は、アニメーションのキーフレームを指定するには?で、キーフレームのリストの形で指定します。

キーフレームというのは、アニメーションの再生のある時点で、その要素の各プロパティが取るべき値を指定したものです。

@keyframes mygradation {
   0% {background-color:rgba(0,255,0,0);}
  60% {background-color:rgba(0,255,0,0.6);}
 100% {background-color:rgba(0,255,0,1);} 
}

アニメーションでは、それぞれのキーフレームの時点で、指定された状態になるように状態変化させます。キーフレームの間については、一定の数学的なアルゴリズムで補間することで連続的に、あるいは指定によっては不連続にアニメーションさせます。

animation-timing-functionプロパティには、この、キーフレーム間の状態の補間方法を指定します。この指定によって、アニメーションの、キーフレーム間での、再生の緩急を制御することができます。

トランジションの補間方法を指定するには?と異なり、この指定はあくまでキーフレーム間を単位とするもので、1回の再生全体についてのものではありません。そのため、それぞれの値の解説での、開始、終了、起点、終点等の用語も、キーフレームから次のキーフレームまでの間の遷移の開始、終了、起点、終点等を指します。

なお、animation-timing-functionプロパティが、@keyframes内の個別のキーフレームで指定された場合は、そのキーフレームから次のキーフレームへの変化についての指定になります。

値としては、ease、linear、ease-in、ease-out、ease-in-out、step-start、step-endのキーワードと、cubic-bezier(x1, y1, x2, y2)関数とsteps(ステップ数, ディレクション)関数が指定できます。

それぞれの値の意味については一覧とトランジションの補間方法を指定するには?を参照してください。

キーフレーム間での変化の仕方を指定する値は、カンマで区切って複数指定することができます。その場合、アニメーションのキーフレーム名を指定するには?プロパティで対応する順番に指定されたアニメーションが、それぞれの値の適用される対象となります。

例えば、animation-nameプロパティで、カンマ区切りで2番目に指定したアニメーションの補間方法は、animation-timing-functionプロパティで、カンマ区切りで2番目に指定した値になります。

以下のように指定した場合、animation1easeに対応し、animation2linearに対応します。

animation-name: animation1, animation2;
animation-timing-function: ease, linear;

以下の例では、myanimationという名前で@keyframesで定義されたアニメーションについて、全体を 3 秒間として、キーフレーム間の変化については一定の速度で(linear)、再生するように指定しています。

animation-name:myanimation; 
animation-duration:3s;
animation-timing-function:linear;

サンプルソース

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>

   /* myanimationという名前のアニメーションの内容を定義します */

   /* 標準 */
   @keyframes myanimation{
       from{ transform:rotate(0deg); background-color:green;}
       50%{ transform:rotate(180deg); background-color:yellow;}
       to{ transform:rotate(360deg); background-color:red;}
   }
   
   /* Firefox */
   @-moz-keyframes myanimation{
       from{ -moz-transform:rotate(0deg); background-color:green;}
       50%{ -moz-transform:rotate(180deg); background-color:yellow;}
       to{ -moz-transform:rotate(360deg); background-color:red;}
   }
   
   /* Chrome, Safari */
   @-webkit-keyframes myanimation{
       from{ -webkit-transform:rotate(0deg); background-color:green;}
       50%{ -webkit-transform:rotate(180deg); background-color:yellow;}
       to{ -webkit-transform:rotate(360deg); background-color:red;}
   }
     
   img#o{
       position:absolute;
       top:100px;
       left:100px;
       /* myanimationという名前のアニメーションの再生方法を指定します */
       animation-name:myanimation;
       animation-duration:5s;
       animation-timing-function:ease-in-out;
       -moz-animation-name:myanimation;
       -moz-animation-duration:5s;
       -moz-animation-timing-function:ease-in-out;
       -webkit-animation-name:myanimation;
       -webkit-animation-duration:5s;
       -webkit-animation-timing-function:ease-in-out;
   }
</style>
</head>
<body>
    <p>背景の色を変化させつつ回転するアニメーションを表示します。</p>
    <p>キーフレーム間の補間は「ease-in-out」(ゆっくり始まって加速し、また減速して終わる)です。</p>
    <img id="o" src="penguin.png">
</body>
</html>



下記画像を、サンプルソースで指定しているフォルダ保存して下さい。初期状態では、サンプルソースと同じ階層のフォルダが指定されています。

penguin.png

関連項目




Apple Watch Series 3Apple Watch Series 3
Appleが販売するスマートウォッチ「Apple Watch」の第3世代モデル。
honor 9honor 9
中国のファーウェイが製造するスマートフォン。
Apple TV 4KApple TV 4K
Appleが発表した4K HDR画質のセットトップボックス。

 ・ITパスポート試験とは
 ・試験範囲と内容
 ・サンプル問題にチャレンジ

 ・Windowsの歴史
ジョン・マッカーシー LISPの開発者
ジョン・マッカーシー
人工知能の研究分野における第一人者。
スティーブ・ジョブズ Appleの共同創設者
スティーブ・ジョブズ
「Mac」や「iPhone」を生み出した経営者。
デニス・リッチー C言語、UNIXの開発者
デニス・リッチー
C言語の設計、UNIXの開発に携わった人物。
».m4b MPEG-4オーディオファイルの拡張子。 up!
».m4r iPhoneの着メロにするAACファイルにつく拡張子。 up!
».xlsx Excel 2007で作成したファイルのデフォルトの拡張子。
».docx Word 2007の標準的な保存形式。XML形式となっている。

2017年10月23日現在
ランキング1   リバースブルートフォース攻撃 (用語辞典)
ランキング2   C&Cサーバー (用語辞典)
ランキング3   セグメント  (用語辞典)
ランキング4   コンテキスト  (用語辞典)
ランキング5   AirDrop  (用語辞典)
ランキング6   輻輳  (用語辞典)
ランキング7   セグメント  (用語辞典)
ランキング8   リバースエンジニアリング  (用語辞典)
ランキング9   サードパーティ  (用語辞典)
ランキング10   ペイロード  (用語辞典)
RSS 0.91 RSS 1.0 RSS 2.0
IT用語辞典バイナリについてウェブリオ株式会社についてお問い合わせ先テクニカルライター募集利用規約
プライバシーポリシー著作権・商標について協力社一覧Weblio 辞書スマート翻訳英和辞典 - Weblio辞書Weblio英会話
©2012 Weblio, Inc. All rights reserved.