適用するアニメーションの名前を指定するには?
要素書式
animation-name: 【アニメーション名】 [, 【アニメーション名】...];
対応ブラウザ
- IE 9：×
- Firefox 10.0：○(-moz-animation-name)
- Opera 11.61：×
- Chrome 17.0：○(-webkit-animation-name)
- Safari 5.1：○(-webkit-animation-name)
※現在、動作にベンダープレフィックスが必要なブラウザは、括弧内にベンダープレフィックス付のプロパティを記載しています。
※ブラウザはWindows 7上で動作確認を行っています。
※ユーザーの設定より、異なる挙動をする場合があります。
値一覧
| 値 | 内容 |
| アニメーション名 | この要素に適用するアニメーションの名前を指定します。
同じアニメーション名を宣言した@keyframesでの指定内容が、アニメーションの内容となります。 |
解説文
CSSのアニメーションでは、プロパティの値を時間的に変化させることで、要素をアニメーションさせます。
animation-nameプロパティには、要素に適用するアニメーションを識別するアニメーション名を指定します。
アニメーション名は、アニメーションのキーフレームを指定するには？でのアニメーションの内容指定と、アニメーションを指定するには？とそのサブプロパティでの、アニメーションの再生方法の指定とを結びつける役割を果たします。
指定したアニメーション名を宣言した@keyframesで定義された、各プロパティの時系列の変化が、要素にアニメーションの内容として適用されます。
アニメーション名は、カンマで区切って複数指定することができます。その場合、それぞれのアニメーション名で指定されるアニメーションは、他のアニメーションを指定するプロパティで対応する順番で指定された値にもとづいて再生されます。
以下のように指定した場合、animation1が5sに対応し、animation2が10sに対応します。
animation-name: animation1, animation2;
animation-duration: 5s, 10s;
以下の例では、myanimationという名前で@keyframesで定義されたアニメーションについて、全体を 3 秒間として再生するという指定を行っています。
animation-name:myanimation;
animation-duration:3s;
サンプルソース
<!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;}
}
/* myanimation2という名前のアニメーションの内容を定義します */
@keyframes myanimation2{
from{ top: 100px;}
30%{ top: 160px;}
60%{ top: 220px;}
to{ top: 300px;}
}
@-moz-keyframes myanimation2{
from{ top: 100px;}
30%{ top: 160px;}
60%{ top: 220px;}
to{ top: 300px;}
}
@-webkit-keyframes myanimation2{
from{ top: 100px;}
30%{ top: 160px;}
60%{ top: 220px;}
to{ top: 300px;}
}
img#o{
position:absolute;
top:100px;
left:100px;
/* myanimationとmyanimation2という名前のアニメーションを適用して
再生方法をそれぞれ指定します。 */
animation-name:myanimation, myanimation2;
animation-duration:5s, 3s ;
animation-iteration-count:1, infinite;
-moz-animation-name:myanimation, myanimation2;
-moz-animation-duration:5s, 3s ;
-moz-animation-iteration-count:1, infinite;
-webkit-animation-name:myanimation, myanimation2;
-webkit-animation-duration:5s, 3s ;
-webkit-animation-iteration-count:1, infinite;
}
</style>
</head>
<body>
<p>背景の色を変化させつつ回転する、５秒間のアニメーションと、</p>
<p>下へ移動する３秒間のアニメーションを同じ画像に設定します。</p>
<p>上下の動きは、回転が終わっても続きます。</p>
<img id="o" src="penguin.png">
</body>
</html>
下記画像を、サンプルソースで指定しているフォルダに保存して下さい。初期状態では、サンプルソースと同じ階層のフォルダが指定されています。
関連項目
