CSS3アニメーションとは何ですか？
アニメーション要素は、別のスタイルの効果への一つのスタイルから徐々に変化です。
あなたは何回限り多くのスタイルを変更することができます。
A.変更の背景アニメーションの色
例としては、次のとおりです：
<！DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<メタ文字コード= "UTF-8">
<メタ名= "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1.0">
<メタHTTP-当量= "X-UA-互換"コンテンツ= "IE =縁">
<タイトル>ドキュメント</タイトル>
<スタイル>
@keyframes myfirst
{
0％{背景：赤;}
20％{背景：青; }
50％{背景：紫;}
100％{背景：黄色;}
}
.test1 {幅：300ピクセル。
高さ：300ピクセル;
背景：黒;
アニメーション：myfirst 6S;
}
</スタイル>
</ div>
</ BODY>
</ HTML>
0％と100％に相当し、「に」「から」、またはキーワードで所定時間の変化率、。
0％は、アニメーションの始まりを表し、それは100％のアニメーションを代表して終了し、停止します。
注：名前とアニメーションの継続時間を定義する必要があります。無視された場合、デフォルト値は0であるため、ロング、映画は、許可されません。
II。位置を変更
アニメーションだけでなく、背景色を変更するには、その位置を変更することができます。
例えば：
<！DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<メタ文字コード= "UTF-8">
<メタ名= "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1.0">
<メタHTTP-当量= "X-UA-互換"コンテンツ= "IE =縁">
<タイトル>ドキュメント</タイトル>
<スタイル>
@keyframes myfirst {
0％{背景：赤。左：0PX。上部：0PX;}
25％{背景：黄色。左：200pxの。上部：0PX;}
50％{背景：青; 左：200pxの。上部：200pxの;}
75％{背景：緑; 左：0PX。上部：200pxの;}
100％{背景：赤。左：0PX。上部：0PX;}
}
DIV
{
幅：100pxに。
高さ：100pxに。
背景：赤;
位置：相対;
アニメーション名：myfirst。
アニメーションの継続時間：2秒。
アニメーションのタイミング機能：リニア;
アニメーションの遅延：2S;
アニメーションの繰り返しカウント：無限。
アニメーション方向：代替。
アニメーションプレイ状態：実行されています。
}
</スタイル>
</ HEAD>
<BODY>
の<div> </ div>
</ BODY>
</ HTML>
キーフレームのルールと、すべてのアニメーションプロパティ@ 3：
@keyframes ：规定动画。
animation ：所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name ：规定 @keyframes 动画的名称。
animation-duration ：规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function ：规定动画的速度曲线。默认是 "ease"。
animation-delay ：规定动画何时开始。默认是 0。
animation-iteration-count ： 规定动画被播放的次数。默认是 1。
animation-direction ： 规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state ：规定动画是否正在运行或暂停。默认是 "running"。
animation-fill-mode ：规定对象动画时间之外的状态。