CSS3 アニメーション キーフレームの概要
CSS3 での @keyframes の使用法の詳細(xì)な説明:
この屬性は、アニメーション屬性と密接に関連しています。アニメーション屬性については、「CSS3 でのアニメーション屬性の使用法の詳細(xì)な説明」の章を參照してください。
1. 基本知識:
キーフレームは中國語に翻訳すると「キーフレーム」を意味します。フラッシュを使用したことがある場合は、これをよく理解する必要があります。もちろん、フラッシュを知らなくても問題ありません。
トランジション屬性を使用してトランジションアニメーション効果を?qū)g現(xiàn)することもできますが、アニメーションプロセスをより正確に制御できないため、少し荒くなります。たとえば、指定された期間內(nèi)の特定の屬性のトランジションを全體的に制御することしかできません。 @keyframes 屬性を使用すると、指定された期間內(nèi)のアニメーションをより細(xì)かく分割できます。
文法構(gòu)造:
@keyframes animationname {keyframes-selector {css-styles;}}パラメータ分析:
1.animationname: アニメーションの名前を宣言します。
2.keyframes-selector: アニメーションの継続時間を分割するために使用されます。パーセント形式を使用することも、「from」形式と「to」形式を使用することもできます。
「from」と「to」の形式は 0% と 100% に相當(dāng)します。
常にパーセント形式を使用することをお勧めします。
2. コード例:
例 1:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ipnx.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:theanimation 5s infinite alternate;
-webkit-animation:theanimation 5s infinite alternate ;
-moz-animation:theanimation 5s infinite alternate ;
-o-animation:theanimation 5s infinite alternate ;
-ms-animation:theanimation 5s infinite alternate ;
}
@keyframes theanimation{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes theanimation{
from {left:0px;}
to {left:200px;}
}
@-moz-keyframes theanimation{
from {left:0px;}
to {left:200px;}
}
@-o-keyframes theanimation{
from {left:0px;}
to {left:200px;}
}
@-ms-keyframes theanimation{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html> 上のコードは、簡単な分析を示します:
1. @keyframes を使用して、theanimation という名前のアニメーションを定義します。
2. @keyframes で宣言されたアニメーション名はアニメーションと併用する必要があります。
3. from to は 0% ～ 100% に相當(dāng)するため、1 つのことを 5 秒以內(nèi)に行う必要があると規(guī)定されています。
例 2:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ipnx.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:theanimation 4s infinite alternate;
-webkit-animation:theanimation 4s infinite alternate ;
-moz-animation:theanimation 4s infinite alternate ;
-o-animation:theanimation 4s infinite alternate ;
-ms-animation:theanimation 4s infinite alternate ;
}
@keyframes theanimation{
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;}
}
@-moz-keyframes theanimation{
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 theanimation{
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;}
}
@-o-keyframes theanimation{
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;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>上記のコードでは、アニメーションの継続時間をパーセンテージで分割し、指定された間隔內(nèi)で指定された內(nèi)容が実行されます。
