ホームページ > 記事 > ウェブフロントエンド > CSS3のTransitionアニメーションプロパティの使い方の紹介

CSS3のTransitionアニメーションプロパティの使い方の紹介

不言オリジナル: 2018-06-28 14:29:482019ブラウズ

この記事では主に 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属性と組み合わせます。、効果を達成するためにトランジション効果が追加されます:

上記はこの記事の全内容です。お役に立てば幸いです。その他の関連コンテンツについては、にご注意ください。 PHP中国語ウェブサイトです！

CSS3のTransitionアニメーションプロパティの使い方の紹介

関連記事