CSS3のTransitionアニメーションプロパティの使い方を詳しく解説-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS3のTransitionアニメーションプロパティの使い方を詳しく解説

高洛峰

Mar 08, 2017 pm 01:27 PM

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 属性をサポートしていません。

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 で定義されたスタイルになります。遷移プロセスは大まかに次のとおりです。

嫦娥が月に飛ぶ別のオンライン例を教えてください。要件は、マウスが月の上を移動するときです。画像では嫦娥が現れ、マウスを離すと嫦娥が消えます CSS3中Transition动画属性用法详解

<!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动画属性用法详解