この記事では主に CSS3 でのトランジション アニメーション属性の使用法を詳しく紹介し、トランジション アニメーションの使用方法を説明します。興味のある方は参考にしてください。
W3C 標準における CSS3 のトランジションは次のように記述されています。 CSS プロパティ値を一定の時間内にスムーズに遷移させるこの効果は、マウスのクリック、フォーカス、クリック、または要素への変更によってトリガーされ、アニメーション効果で CSS プロパティ値をスムーズに変更します。
Transition 属性には次の 4 つの値があります: •Transition-property: HTML 要素のどの CSS 属性でトランジション グラデーション処理を実行するかを指定します。この属性には、色、幅、高さなどのさまざまな標準 CSS 属性を指定できます。
•Transition-duration: 属性遷移の継続時間を指定します •Transition-timing-function: グラデーションの速度を指定します:
1.ease: (徐々に遅くなります) デフォルト値、イーズ関数はベジェ曲線と同等です。 (0.25, 0.1 , 0.25, 1.0);
2. 線形: (均一速度)、線形関数はベジェ曲線 (0.0, 0.0, 1.0, 1.0) と同等です。イーズイン関数はベジェ曲線 (0.42, 0, 1.0, 1.0) と同等です。
4. イーズアウト関数はベジェ曲線 (0, 0, 0.58, 1.0) と同等です。 );
5. イーズインアウト: (加速してから減速)、イーズインアウト関数は 3 次ベジェ曲線 (0.42、0.58、1.0) と同等です。値を使用すると、時間曲線 )、特定の 3 次ベジェ曲線をカスタマイズできます。 4 つの値 (x1、y1、x2、y2) は、曲線上の点 P1 および P2 に固有です。すべての値は [0, 1] の範囲内にある必要があります。そうでない場合は無効になります。
•移行遅延: 遅延時間、つまり移行プロセスの開始にかかる時間を指定します。
ブラウザの互換性
Internet Explorer 9 以前のバージョンは、transition 属性をサポートしていません。 Internet Explorer 10、Firefox、Opera、Chrome は、transition 属性をサポートしています。 Chrome 25 以前および Safari では、接頭辞 -webkit- が必要です。
以下は、transition の使用法を説明するための例です
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transition演示1</title> <style type="text/css"> .animated_p { margin: 100px auto; width:100px; height:60px; background:#92B901; /*简写属性*/ -webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s; /* Safari */ /*每个属性分开写*/ transition-property:width,height,transform,background,opacity; transition-duration:1s,1s,1s,1s,1s,1s; -webkit-border-radius:5px; border-radius:5px; opacity:0.4; } .animated_p:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); opacity:1; background:#1ec7e6; width:200px; height:120px; } </style> </head> <body> <p class="animated_p"></p> </body> </html>
上記のコードでは、マウスが p に移動すると、CSS 属性: width、height、transform、background、opacity にグラデーション トランジション効果が適用されます。 。最終的に、CSS スタイルは .animated_p で定義されたスタイルになります。移行プロセスは大まかに次のとおりです。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>transition演示2</title> <style type="text/css"> body{ color: #fff; background:#000; } .change{ display:block; width:400px; height:400px; background:url(http://p3.qhimg.com/t0134c65e59012a1257.png) no-repeat center; background-size:cover; border:1em solid rgba(255,255,255,.8); margin:50px auto; } .change img{ display:block; width:300px; height:284px; opacity:0; -webkit-transform:translate(-100px,-100px); transform:translate(-100px,-100px); -webkit-transition:opacity 1s ease-in-out 0.5s,-webkit-transform 1s ease-in-out; transition: opacity 1s ease-in-out 0.5s,transform 1s ease-in-out; } .change:hover img{ -webkit-transform:translate(0px,0px); transform:translate(0px,0px); opacity:1; } </style> </head> <body> <a href="http://image.haosou.com/i?q=%E5%AB%A6%E5%A8%A5png&src=tab_www" class="change " target="_blank"> <img src="http://p4.qhimg.com/t0160e6a92121691e22.png" alt="" /> </a> </body> </html>
嫦娥に浮遊効果を持たせるために、transform属性を設定し、opacity属性と組み合わせます。 、効果を達成するためにトランジション効果が追加されます:
関連する推奨事項:
10 CSS3 によって実装されたエフェクトの読み込み CSS3 でのトランジションおよびアニメーション アニメーション プロパティの使用方法の紹介
以上がCSS3のTransitionアニメーションプロパティの使い方の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。