CSS3アニメーションのプロパティ
CSS3 には新しいアニメーション属性「@keyframes」 があり、その意味は文字通りの意味であるキーフレームから理解でき、Flash の意味と一致しています。 CSS3 を使用してアニメーション効果を作成する原理は Flash と同じです。キー フレームで状態効果を定義し、CSS3 を使用してアニメーション効果を駆動する必要があります。
構文
@keyframes アニメーション名 {keyframes-selector {css-styles;}}
アニメーション名は必須です。アニメーションの名前を定義します。
キーフレームセレクター
必須。アニメーションの継続時間の割合。
有効な値:
0-100%
から (0% と同じ)
から (100% と同じ)
CSS スタイルが必要です。 1 つ以上の有効な CSS スタイル プロパティ。
定義と使用法
@keyframes ルールを使用すると、アニメーションを作成できます。
アニメーション作成の原則は、ある CSS スタイルのセットを別のスタイルのセットに徐々に変更することです。
この CSS スタイルのセットは、アニメーション処理中に複数回変更できます。
変更が発生する時間をパーセンテージで指定するか、0% と 100% に相当するキーワード「from」と「to」を使用して指定します。
0% はアニメーションの開始時間、100% はアニメーションの終了時間です。
ブラウザのサポートを最適化するには、常に 0% および 100% セレクターを定義する必要があります。
注: アニメーションの外観を制御し、アニメーションをセレクターにバインドするには、アニメーション プロパティを使用してください。
ブラウザのサポート状況
現在、ブラウザは @keyframes ルールをサポートしていません。
Firefox は代替の @-moz-keyframes ルールをサポートしています。
Opera は代替の @-o-keyframes ルールをサポートしています。
Safari と Chrome は、代替の @-webkit-keyframes ルールをサポートしています。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background: #ff72cc;
position: relative;
animation: mymove 5s infinite;
-moz-animation: mymove 5s infinite; /* Firefox */
-webkit-animation: mymove 5s infinite; /* Safari and Chrome */
-o-animation: mymove 5s infinite; /* Opera */
}
@keyframes mymove {
0% {
top: 0px;
}
25% {
top: 200px;
}
75% {
top: 50px
}
100% {
top: 100px;
}
}
@-moz-keyframes mymove /* Firefox */
{
0% {
top: 0px;
}
25% {
top: 200px;
}
75% {
top: 50px
}
100% {
top: 100px;
}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {
top: 0px;
}
25% {
top: 200px;
}
75% {
top: 50px
}
100% {
top: 100px;
}
}
@-o-keyframes mymove /* Opera */
{
0% {
top: 0px;
}
25% {
top: 200px;
}
75% {
top: 50px
}
100% {
top: 100px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>CSS3 アニメーション
@keyframes でアニメーションを作成するときは、それをセレクターにバインドします。そうしないと、アニメーションは効果がありません。
少なくとも次の 2 つの CSS3 アニメーション プロパティがセレクターにバインドされるように指定します:
アニメーションの名前を指定します
アニメーションの継続時間を指定します
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s infinite;
-moz-animation: mymove 5s infinite; /* Firefox */
-webkit-animation: mymove 5s infinite; /* Safari and Chrome */
-o-animation: mymove 5s infinite; /* Opera */
}
@keyframes mymove {
0% {
top: 0px;
background: red;
width: 100px;
}
100% {
top: 200px;
background: yellow;
width: 300px;
}
}
@-moz-keyframes mymove /* Firefox */
{
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;
}
}
@-o-keyframes mymove /* Opera */
{
0% {
top: 0px;
background: red;
width: 100px;
}
100% {
top: 200px;
background: yellow;
width: 300px;
}
}
</style>
</head>
<body>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
<div></div>
</body>
</html>CSS3 アニメーション プロパティ
以下の表に、@Keyframes ルールとすべてのアニメーション属性を示します。 属性 説明 CSS
@Keyframes で指定されたアニメーション。 3
りー
- おすすめコース
- コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜 