CSS3 アニメーション

CSS3 アニメーション

CSS3 により、多くの Web ページにおけるアニメーション画像、Flash アニメーションおよび JavaScript に代るアニメーションを作成することができます。

CSS3 @keyframes ルール

CSS3 でアニメーションを作成するためには、@keyframes ルールについて学ぶ必要があります。

@keyframes ルールは、アニメーションが作成される場所です。 @keyframes ルールの中の CSS スタイルを指定してください。 アニメーションは現在のスタイルから新しいスタイルに徐々に変ります。

ブラウザ・サポート

Internet Explorer および Opera は、まだ @keyframes ルールおよび animation プロパティをサポートしていません。

Firefox は、接頭辞 -moz- を必要とし、Chrome と Safari は、接頭辞 -webkit- を必要とします。

例

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}

Bind the animation to a selector by specifying at least these two CSS3 animation properties:

• Specify the name of the animation
• Specify the duration of the animation

CSS3 アニメーション

アニメーションを @keyframe で作成したときは、セレクタにバインドしてください。バインドしない場合、 アニメーション効果は全くありません。

少なくとも、次の 2 つの CSS3 animation プロパティを指定することで、アニメーションをセレクタへバインドします:

• アニメーションの名前を指定する
• アニメーションの継続時間を指定する

例

"myfirst" アニメーションを div 要素へ、継続時間: 5 秒でバインドします:

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}

Try it yourself »

注: アニメーションの名前と継続時間を定義しなければなりません。 もし継続時間を省略すると、デフォルト値が 0 のため、アニメーションは動作しません。

CSS3 のアニメーションとは何ですか ?

アニメーションは、要素を或るスタイルから別のものに徐々に変化させることで生ずる効果です。

希望する多くのスタイルへ 何度でも変更することができます。.

パーセント、またはキーワード "from" と "to" （0% と 100% に同じ）で、 いつ変化が起こるかを指定します。

0% はアニメーションの開始で、100% がアニメーションの終了です。

最良のブラウザサポートには、常に 0% および 100% の両方をセレクタに定義する必要があります。

例

animation が、25%、50%である時に背景色が変化し、100% 終了後、再度繰返します:

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

Try it yourself »

例

背景色と位置が変化します:

@keyframes myfirst
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

Try it yourself »

CSS3 Animation プロパティ

次の表は、@keyframes と全 animation プロパティの一覧です:

下の2つの例は、全 animation プロパティを設定しています:

例

animation プロパティのすべてが設定された、myfirst と云うアニメーションを実行します:

div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}

Try it yourself »

例

ショートハンド animation プロパティを使用して、上と同じアニメーションを行います:

div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
}

Try it yourself »