CSS3アニメーションアニメーションプロパティ
CSS3のアニメーション屬性の使い方の詳細(xì)な説明:
アニメーションは中國語に翻訳すると「アニメーション」を意味します。もちろん、アニメーション屬性は要素のアニメーション効果を定義するために使用されます。 Flash または js を使用して作成されたアニメーション。少し荒削りではありますが、基本的なアニメーションのニーズを満たすことができるので、このプロパティを習(xí)得する必要があります。
1. 基礎(chǔ)知識:
以下の記事を読む前に、CSS3 での @keyframes の使い方の詳細(xì)な説明を事前に參照することをお勧めします。
transition 屬性を使用すると、アニメーションのトランジション効果を?qū)g現(xiàn)できますが、この屬性には欠點(diǎn)があります。つまり、初期値から終了値までのトランジションプロセスの制御性が低く、アニメーション効果をより詳細(xì)に制御できないことです。アニメーション屬性 @keyframes で定義したアニメーション名を組み合わせて、アニメーションの遷移処理をより詳細(xì)に制御できます。この屬性は、境界線、背景、その他の屬性と同様の複合屬性です。
transition屬性については、CSS3のtransition屬性の詳しい説明を參照してください。
文法構(gòu)造:
animation：[[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]] [ , [ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ] || [animation-play-state] || [animation-fill-mode]]*
パラメータ分析:
1.animation-name: この屬性は、要素に適用されるアニメーション名を指定します。この名前は @keyframes によって定義されます。
2.animation-duration: この屬性はアニメーションの継続時間を指定するために使用されます。
3.animation-timing-function: アニメーションの遷移タイプを指定するために使用されます。
4.animation-delay: アニメーションの実行を開始するまでの遅延時間を指定するために使用されます。
5.animation-iteration-count: アニメーションの繰り返し數(shù)を指定するために使用されます。
6.animation-direction: アニメーション ループ內(nèi)で逆方向の動きが発生するかどうかを指定するために使用されます。
7.animation-play-state: アニメーションが実行中か一時停止中かを指定します。
8.animation-fill-mode: オブジェクトのアニメーション時間外の狀態(tài)を指定します。
特別な指示:
1. 複數(shù)の屬性値のセットを指定する場合は、それらをカンマで區(qū)切ります。
2. 対応するスクリプト機(jī)能はアニメーションです。
コード例:
<!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{
0% {left:0px;}
100% {left:200px;}
}
@-webkit-keyframes theanimation{
0% {left:0px;}
100% {left:200px;}
}
@-moz-keyframes theanimation{
0% {left:0px;}
100% {left:200px;}
}
@-o-keyframes theanimation{
0% {left:0px;}
100% {left:200px;}
}
@-ms-keyframes theanimation{
0% {left:0px;}
100% {left:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html> 上記のコードは、div要素のleft屬性値を設(shè)定して0pxから200pxへの遷移をアニメーション化し、サイクルを無限に繰り返したり、逆方向の移動を?qū)g行したりすることができます。
<!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>上記のコードは最初のコードよりも複雑です。ここではその実行プロセスを紹介します。
1. アニメーション全體の合計(jì)時間は 4 秒に設(shè)定されます。
2.@keyframes は、0% ～ 25% の期間で左の屬性値を 0 ～ 100px に設(shè)定し、背景色を赤から青、25% ～ 50%、50% ～ 75% に変換します。 75% ～ 100% の場合も同様です。
3. 無限ループと逆モーション効果を?qū)g現(xiàn)できます。
<!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:firstanimation 5s infinite alternate,secondanimation 2s infinite alternate;
-webkit-animation:firstanimation 5s infinite alternate,secondanimation 2s infinite alternate;
-moz-animation:firstanimation 5s infinite alternate,secondanimation 2s infinite alternate;
-o-animation:firstanimation 5s infinite alternate,secondanimation 2s infinite alternate;
-ms-animation:firstanimation 5s infinite alternate,secondanimation 2s infinite alternate;
}
@keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@-webkit-keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@-moz-keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@-o-keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@-ms-keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
@-webkit-keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
@-moz-keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
@-o-keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
@-ms-keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>上記のコードは、div のアニメーション屬性の複數(shù)のセットをカンマで區(qū)切って一度に設(shè)定します。
