css3 を使用すると、JavaScript や Flash を使用せずにスタイルを通じて Web 要素をアニメーション化でき、Web サイトをよりクールにすることができます。
css3 トランジション
トランジションアニメーション(trainsition)属性は要素スタイルの遷移を実現できます。 trainition がサポートするブラウザは ie10、firefox、chrome、opera です。
まず、trainition のいくつかのプロパティを見てみましょう:
trainsition-property: アプリケーション トランジションの CSS 属性名を指定します。
trainsition-duration: 費やされる過剰な時間を指定します。
trainsiton-timing-function: 遷移時間曲線を指定します。
trainsition-delay: 遷移が開始されるタイミングを指定します。
まず、demo.css に
p{ width:100px; height:100px; background:red; trainsition:width 3s,height 2s;//在这里为了方便,将过渡属性简写了,我们可以将过渡属性简写为trainsition:加上上面四个属性,可以把默认属性省略。 } p:hover { width:300px; height:200px; }
を書きます。 赤い p ブロックにマウスを移動します。赤いブロックの長さと幅がゆっくりと増加します。これは、トランジションの最も単純な実装です。
注: 移行時間が設定されていない場合、デフォルトでは 0 になります。ただトランジション効果はありません。
私たちがより頻繁に使用する方法は、次のように、js を介してスタイルを追加して、さまざまなアニメーションの遷移を練習することです:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="demo.css"/> </head> <body> <p></p> </body> </html>
変更されたコードでは、マウスが移動するときに jquery を介してオーバー スタイルが追加されます。 over、in pスタイルにtransition属性が設定されているため、マウスを離すとoverスタイルが削除され、トランジションアニメーションが実装されます。
ただし、上記ではスタイルの変更が実装されていますが、その変更は初期状態から最終状態への変更であり、これには大きな制限があることがわかります。そのため、中間状態の変換ができることを期待しています。このとき、キーフレーム アニメーション (@keyframes) が使用されます:
基本的な形式は次のとおりです:
@keyframes 名前{
時点{要素ステータス}
....
}
たとえば、
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <style> p{ background:red; width:200px; height:200px; transition:width 2s,height 2s; } p.over{ width:300px; height:300px; } </style> </head> <body> <p </p> <script> $('p').hover(function(){ $('p').addClass('over');}, function(){ $('p').removeClass('over'); }); </script> </body> </html>
@frames chgground{ from{ backgroud:red;} to{backgroud:yellow;} }
p chgbackground のアニメーションでは、パーセンテージを使用してキー フレームの状態を 0% と %100 で指定することもできます。次のコード
p{ animation:chgbackground 3s; }
t は、このコードによって実現できます。 0% から 50% および 50% から 100% までの異なるグラデーション効果があります。
以上がcss3 を使用してスタイルを通じて Web ページ要素をアニメーション化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。