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

animationの解説

アニメーションを指定するには?

要素書式

animation: 【アニメーション指定】 [, 【アニメーション指定】...];

対応ブラウザ

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

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

アニメーション指定項目一覧

それぞれのアニメーション指定は、スペースで区切られた、以下の項目で構成されています。すべて省略可能ですが、時間の値はこの順番で解釈されます。

カンマで区切って、複数のアニメーション指定のセットを指定することもできます。

【animation-name】 【animation-duration】 【animation-timing-function】 【animation-delay】 【animation-iteration-count】 【animation-direction】

項目内容
animation-name適用したいアニメーションの、@keyframesで設定した名前を指定する、animation-nameプロパティの値を指定します。既定値はnone
animation-durationアニメーションの再生時間を指定する、animation-durationプロパティの値を指定します。既定値は0s
animation-timing-functionアニメーションの再生速度の変化を指定する、animation-timing-functionプロパティの値を指定します。既定値はease
animation-delayアニメーションの開始までの時間を指定する、animation-delayプロパティの値を指定します。既定値は0s
animation-iteration-countアニメーションの再生回数を指定する、animation-iteration-countプロパティの値を指定します。既定値は1
animation-directionアニメーションの再生方向を指定する、animation-directionプロパティの値を指定します。既定値はnormal

解説文

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

トランジションを指定するには?では、起点と終点の二つの状態しか指定することができませんが、アニメーションでは、よりきめ細かく中間の時点の状態を指定できます。

アニメーションの指定は、プロパティの値の時間的変化を指定する部分(再生内容)と、再生時間などの、要素に対する適用の仕方を指定する部分(再生方法)との、二つの部分からなっています。

アニメーションのキーフレームを指定するには?では、この二つのうち、アニメーションの内容となる、プロパティの値の時間的変化を指定します。

@keyframesで定義されたアニメーションの内容を、どの要素に適用し、どのように再生するのかは、animationプロパティ、またはそのサブプロパティの、アニメーションのキーフレーム名を指定するには?アニメーションの再生時間を指定するには?アニメーションの補間方法を指定するには?アニメーションのディレイを指定するには?アニメーションの繰り返しを指定するには?アニメーションの方向を指定するには?で指定します。

animation-nameプロパティは、適用したいアニメーションの、@keyframesで設定した名前を指定します。既定値none(指定なし)です。

animation-durationプロパティは、アニメーションの再生時間を指定します。既定値0s(0秒)です。

animation-timing-functionプロパティは、アニメーションの速度の変化の仕方を指定します。既定値ease(開始と終了付近では再生速度が滑らかになる)です。

animation-delayプロパティは、アニメーションが始まるまでの待ち時間を指定します。ここで指定した時間が経過した後で、アニメーションが開始されます。既定値0s(0秒)です。

animation-iteration-countプロパティは、アニメーションの再生回数を指定します。既定値1(1回)です。

animation-directionプロパティは、アニメーションの再生方向を指定します。逆再生や、順再生と逆再生の交互の繰り返しなどが指定できます。既定値normal(順方向の再生)です。

各指定の詳細は、それぞれの項目を参照してください。

animationプロパティでは、スペース区切りで、これらのプロパティの値を一括して指定します。(短縮プロパティ)

値はすべて省略可能で、順序が前後しても構いませんが、時間指定は、つねに最初の値がanimation-durationプロパティの、次の値がanimation-delayプロパティの値として解釈されます。

以下では、signalという名前を付けた、開始時点で背景色が青、50%の時点で背景色が黄色、終了時点で背景色が赤になるようなアニメーションを定義して、div要素に適用しています。

この場合、アニメーションの名称(animation-name)がsignal、再生時間(animation-duration)が 5 秒(5s)、再生回数(animation-iteration-count)が、無限反復(infinite)になります。

// アニメーションのキーフレーム定義
@keyframes signal {
   0% { background-color:blue;}
   50% { background-color:yellow; }
   100% { background-color:red; }
}

div#output{
    width:100px;
    height:100px;
    animation: signal 5s infinite;
}

複数のアニメーションを同じ要素に一括して指定する場合は、以下のように、それぞれのアニメーションの指定を、カンマで区切って並べます。

div#output{
    width:100px;
    height:100px;
    animation: animation1 5s infinite, animation2 10s 3;
}

サンプルソース

<!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:myanimation 5s linear 0s infinite alternate; 
       -moz-animation:myanimation 5s linear 0s infinite alternate; 
       -webkit-animation:myanimation 5s linear 0s infinite alternate; 
   }
</style>
</head>
<body>
    <p>背景の色を変化させつつ回転するアニメーションを表示します。</p>
    <img id="o" src="penguin.png">
</body>
</html>



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

penguin.png

関連項目




AQUOS RAQUOS R
シャープのスマートフォン「AQUOS」シリーズのフラグシップモデルの呼称。
LAVIE Note MobileLAVIE Note Mobile
NECが販売するモバイルノートPCのシリーズ。
Galaxy S8 PlusGalaxy S8 Plus
スマートフォン「Galaxy S8」の大画面モデル。

 ・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年4月27日現在
ランキング1   ICT (用語辞典)
ランキング2   セグメント (用語辞典)
ランキング3   リーンスタートアップ  (用語辞典)
ランキング4   スワイプ  (用語辞典)
ランキング5   ライトバック  (用語辞典)
ランキング6   コンテキスト  (用語辞典)
ランキング7   バリデーション  (用語辞典)
ランキング8   オムニチャネル  (用語辞典)
ランキング9   フラッグシップモデル  (用語辞典)
ランキング10   アクティビティ  (用語辞典)
RSS 0.91 RSS 1.0 RSS 2.0
IT用語辞典バイナリについてウェブリオ株式会社についてお問い合わせ先テクニカルライター募集利用規約
プライバシーポリシー著作権・商標について協力社一覧Weblio 辞書スマート翻訳英和辞典 - Weblio辞書Weblio英会話
©2012 Weblio, Inc. All rights reserved.