ホームページ > 記事 > ウェブフロントエンド > CSS3のTransitionアニメーションプロパティの使い方を詳しく解説
W3C 標準では、CSS3 トランジションを次のように説明しています: 「CSS トランジションにより、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 属性をサポートしていません。
<!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://www.php.cn/) 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属性を設定し、不透明度属性を使用し、効果を実現するためにトランジション効果が追加されます:
以上がCSS3のTransitionアニメーションプロパティの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。