ホームページ > 記事 > ウェブフロントエンド > CSS3のTransitionアニメーションプロパティの使い方を詳しく解説
CSS3のTransitionアニメーションプロパティの使い方を詳しく解説
- 高洛峰オリジナル
- 2017-03-08 13:27:271711ブラウズ
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 サイトの他の関連記事を参照してください。