CSS3基本教程

CSS3 アニメーション(Animations)

CSS3アニメーション機能は、キーフレームアニメーションを作成することができます。

CSSアニメーションを作成するための機能を提供します。3アニメーション

前章では、CSSを通じて簡単なアニメーションを実行する方法について学びました。3属性を一つの値から別の値にアニメーションで変換する機能があります。しかし、CSS3トランジションは、アニメーションが時間とともにどのように進行するかをほぼ制御できません。

CSS3アニメーションは、キーフレームに基づくアニメーションにおいてさらに進んでおり、CSS属性を時間とともに指定する一連のキーフレームとして、Flashアニメーションのように使用できます。

CSSアニメーションの作成は、以下の例のように2つのステップのプロセスです：

CSSアニメーションを構築する最初のステップは、各キーフレームを定義し、キーフレーム宣言を使用してアニメーションに名前を付けます。
第2ステップはanimationを使用する-name属性はキーフレームを名前で参照し、animation-durationと他のオプションアニメーション属性アニメーションの動作を指定する方法を示します。

ただし、キーフレームルールを参照または適用する前にキーフレームルールを定義する必要はありません。以下の例では、CSSを使用して3アニメーション機能は<div>ボックスが一つの位置からもう一つの位置に水平に移動するアニメーションを設定します。

例

.box　{
　　　　width:　50px；
　　　　height:　50px；
　　　　background:赤い；
　　　　position:　relative;
　　　　/*　Chrome、Safari、Opera　*/
　　　　-webkit-animation-name:　moveit;
　　　　-webkit-animation-duration:　2s;
　　　　
　　　　animation-name:　moveit;
　　　　animation-duration:　2s;
}
　
/*　Chrome、Safari、Opera　*/
@-webkit-keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}
　
@keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}

テストを見て‹/›

少なくとも2つの属性animationを指定する必要があります。-nameとanimation-duration（0より大きい）が指定されると、アニメーションが実行されます。ただし、他のすべてのアニメーション属性はオプションであり、デフォルトの値がアニメーションの発生を妨げないためです。

注意：すべてのCSS属性がアニメーション可能ではありません。通常、数字、長さ、パーセンテージ、または色の値を受け入れるCSS属性がアニメーション可能です。

キーフレームを定義する

キーフレームは、アニメーションの各段階のアニメーション属性の値を指定するために使用されます。キーフレームは特別なCSSルール-@keyframes指定の。キーフレームスタイルルールのキーフレーム選択子はパーセンテージ（％）で始まり、またはキーワードfrom（0％）からto（等しい）までの間で指定されます。100％）。選択子は、アニメーション中にキーフレームの構築位置を指定するために使用されます。

パーセンテージはアニメーション持続時間のパーセンテージを表し、0％はアニメーションの開始点を表します。100％は終点を代表します。50％は中点を代表し、その後も同様です。これは、2sアニメーション中の50％のキーフレームはアニメーション中の1s。

例

.box　{
　　　　width:　50px；
　　　　height:　50px；
　　　　margin:　100px；
　　　　background:赤い；
　　　　position:　relative;
　　　　left:　0;
　　　　/*　Chrome、Safari、Opera　*/
　　　　-webkit-animation-name:　shakeit;
　　　　-webkit-animation-duration:　2s;
　　　　
　　　　animation-name:　shakeit;
　　　　animation-duration:　2s;
}
　
/*　Chrome、Safari、Opera　*/
@-webkit-keyframes　shakeit　{
　　　　12.5%　{left:　-50px；}
　　　　25%　{left:　50px；}
　　　　37.5%　{left:　-25px；}
　　　　50%　{left:　25px；}
　　　　62.5%　{left:　-10px；}
　　　　75%　{left:　10px；}
}
　
@keyframes　shakeit　{
　　　　12.5%　{left:　-50px；}
　　　　25%　{left:　50px；}
　　　　37.5%　{left:　-25px；}
　　　　50%　{left:　25px；}
　　　　62.5%　{left:　-10px；}
　　　　75%　{left:　10px；}
}

テストを見て‹/›

アニメーションショートカット属性

アニメーションを作成する際には、多くの属性を考慮する必要があります。ただし、すべてのアニメーション属性を一つの属性で指定することで、コードを短縮することもできます。

このanimation属性は、一覧に並べられた順序で全ての単一のアニメーション属性。例えば：

例

.box　{
　　　　width:　50px；
　　　　height:　50px；
　　　　background:赤い；
　　　　position:　relative;
　　　　/*　Chrome、Safari、Opera　*/
　　　　-webkit-animation:　repeatit　2s　linear　0s　infinite　alternate;
　　　　
　　　　animation:　repeatit　2s　linear　0s　infinite　alternate;
}
　
/*　Chrome、Safari、Opera　*/
@-webkit-keyframes　repeatit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}
　
@keyframes　repeatit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}

テストを見て‹/›

注意：もし値が欠けているか、指定されていない場合、その属性のデフォルト値が使用されます。これは、animation-duration属性の値が欠けている場合、デフォルト値0が適用されるため、过渡は発生しません。

CSS3アニメーション属性

以下の表は、アニメーションに関連するすべての属性を簡単に概説しています。

属性	説明
animation	すべてのアニメーション属性を1つの宣言で設定するために使用されるショートカット属性です。
animation-name	指定された@keyframesが選択された要素の定義されたアニメーションに適用される名前を指定します。
animation-duration	アニメーションが1つのアニメーション周期を完了するのに必要な秒数またはミリ秒を指定します。
animation-timing-function	アニメーションの各周期の持続時間中にどのように進行するかを指定します、すなわちエイリアシス機能です。
animation-delay	アニメーションがどのタイミングで開始するかを指定します。
animation-iteration-count	アニメーションが停止する前にループで何回再生されるかを指定します。
animation-direction	アニメーションが交互にループで逆方向に再生されるかどうかを指定します。
animation-fill-mode	CSSアニメーションが実行される前に、または後にどのようにスタイルを適用するかを指定します。
animation-play-state	アニメーションが実行されるか停止されるかを指定します。
@keyframes	アニメーションの期間中、各ポイントのアニメーション属性の値を指定します。

CSS3 多列レイアウト CSS3 渡過効果