CSS3 @keyframesルール
例
div要素が徐々に200ピクセルに移動してください:
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
»をお試しください
より多くの例については、このページの下で。
ブラウザのサポート
属性 | |||||
---|---|---|---|---|---|
@keyframes | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
タグの定義と指示
@keyframesルールを使用して、アニメーションを作成することができます。
徐々に別のCSSスタイルから設定を変更することにより、アニメーションを作成します。
アニメーション中は、時間を設定するCSSスタイルを変更することができます。
指定された%の変化、またはキーワード「から」と「に」、これは0%〜100%同一である場合に使用が発生します。
アニメーションが完了したとき、0%は、アニメーションの開始時、100%です。
最適なブラウザのサポートのために、あなたは常に0%とセレクタの100%として定義する必要があります。
注:また、バインドアニメーションを選択するために使用されるアニメーションの外観を制御するために、アニメーションのプロパティを使用します。。
文法
@keyframesanimationname {keyframes-selector {css-styles;}}
値 | 説明 |
---|---|
animationname | 必須。 アニメーション名を定義します。 |
キーフレームセレクタ | 必須。 アニメーションの割合期間。 有効な値: 0から100パーセント 注:アニメーションキーフレーム・セレクタを使用することができます。 |
CSS-スタイル | 必須。 一つ以上の正当なCSSスタイル属性 |
オンラインの例
例
ムービーを追加するには、キーフレームセレクタの多く:
@keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
»をお試しください
例
1アニメーションで多くのCSSスタイルを変更します。
@keyframes mymove
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
»をお試しください
例
多くのCSSスタイルを持つ多くのキーフレームセレクタ:
@keyframes mymove
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
»をお試しください
関連記事
チュートリアルCSS3: CSS3アニメーション