ホーム プログラミング言語 Web関連 css3 詳細CSSトランジション（トランジション効果）

詳細CSSトランジション（トランジション効果）

 
 
通常、CSS のプロパティ値が変更されると、ブラウザーは対応するスタイルをすぐに更新します。たとえば、マウスが要素の上に置かれると、:hover セレクターによって定義されたスタイルが要素にすぐに適用されます。トランジション機能が CSS3 に追加されました。これにより、単純なアニメーションに似ていますが、フラッシュや JavaScript の助けを借りずに、指定された時間内に要素を 1 つのスタイルから別のスタイルにスムーズにトランジションできます。

 

次のように、CSS には 5 つのトランジション プロパティがあります。

  • transition-property: 要素の遷移に参加するプロパティを設定します。
  • transition-duration: 要素遷移の期間を設定します。
  • transition-timing-function: 要素遷移のアニメーション タイプを設定します。
  • transition-delay: 遷移遅延時間を設定します。デフォルトは 0 です。
  • transition: 上記の 4 つの遷移プロパティを同時に設定するために使用される省略形のプロパティ。

遷移を正常に実装するには、2 つのことを定義する必要があります。

  • 要素のパラメーターとトランジション効果の属性。
  • トランジション効果の持続時間。

ヒント: 遷移効果は通常、マウスが要素の上に置かれたときに発生します.遷移時間が設定されていない場合、遷移時間のデフォルト値が 0 であるため、遷移効果は有効になりません.

コンテンツ 表示

1.transition-property

transition-property 属性は、要素内の遷移に関与する属性の名前を設定するために使用され、構文形式は次のとおりです。

transition-property: none | all | property;

パラメータの説明は次のとおりです。

  • none: 遷移効果に関与する属性がないことを示します。
  • all: すべての属性が遷移効果に参加することを示します。
  • property: 遷移効果を適用する,プロパティ名のリストを定義します。複数のプロパティ名はカンマで区切ります。

サンプルコードは次のとおりです。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 3px solid black;
            margin: 10px 0px 0px 10px;
            transition-property: width, background;
        }
        div:hover {
            width: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="kukku"></div>
</body>
</html>
詳細CSSトランジション
hover

before hover

2.transition-duration

transition-duration 属性は、遷移時間 (秒またはミリ秒) を設定するために使用されます。構文は次のとおりです。

transition-duration: time;

その中で、time はトランジション効果が完了するまでにかかる時間 (秒またはミリ秒単位) であり、デフォルト値は 0 であり、効果がないことを意味します。

複数の属性がトランジションに参加している場合、 transition-duration: 1s, 2s, 3s;のように、コンマを使用して複数のアトリビュートを区切って、これらのアトリビュートのトランジションに必要な時間を順番に設定することもできます。さらに、時間を使用して、移行に参加するすべてのプロパティの移行に必要な時間を設定することもできます。サンプルコードは次のとおりです。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 3px solid black;
            margin: 10px 0px 0px 10px;
            transition-property: width, background;
            transition-duration: .25s, 1s;
        }
        div:hover {
            width: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

3.transition-timing-function

transition-timing-function 属性は、遷移アニメーションのタイプを設定するために使用されます. 属性のオプション値は次のとおりです:

価値 説明
linear 遷移全体を常に同じ速度で完了します。これは、cubic-bezier(0,0,1,1) と同等です。
ease 低速で開始し、次に高速で、低速で終了して遷移プロセスを完了します。これは、cubic-bezier(0.25,0.1,0.25,1) と同等です。
ease-in 遷移プロセスを低速で開始します。これは、cubic-bezier(0.42,0,1,1) に相当します。
ease-out 遷移を低速で終了するプロセス。cubic-bezier(0,0,0.58,1) に相当します。
ease-in-out 遅い速度で開始し、遅い速度で終了する遷移。cubic-bezier(0.42,0,0.58,1) に相当します。
cubic-bezier(n, n, n, n) cube-bezier() 関数を使用して独自の値を定義します。各パラメーターの値の範囲は 0 から 1 です。

サンプルコードは次のとおりです。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 3px solid black;
            margin: 10px 0px 0px 10px;
            transition-property: width, background;
            transition-duration: .25s, 1s;
            transition-timing-function: ease;
        }
        div:hover {
            width: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

4.transition-delay

transition-delay 属性は、トランジション効果が開始するタイミングを設定するために使用されます. 属性の構文は次のとおりです:

transition-delay: time;

このうち、パラメーター time は、トランジション効果が開始されるまでの待機時間を設定するために使用され、単位は秒またはミリ秒です。

サンプルコードは次のとおりです。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 3px solid black;
            margin: 10px 0px 0px 10px;
            transition-property: width, background;
            transition-duration: .25s, 1s;
            transition-delay: 3s;
        }
        div:hover {
            width: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
 
5.トランジション

transition 属性は上記の 4 つの属性の省略形で、上記の 4 つの属性を同時に設定できます。属性の構文形式は次のとおりです。

transition: transition-property transition-duration transition-timing-function transition-delay;

transition 属性では、transition-property と transition-duration は必須パラメーターであり、transition-timing-function と transition-delay はオプションのパラメーターであり、必要がなければ省略できます。また、transition 属性でトランジション効果の複数のグループを設定することもでき、各グループはコンマで区切られます。サンプル コードは次のとおりです。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width：100px;
            height：100px;
            border：3px solid black;
            margin: 10 0 0 10px;
            transition: width .25s liner 1.9s, background 2s 3s, transform 3s;
        }
        div:hover {
            width: 200px;
            background-color: blue;
            transform: rotate(180deg)
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
 

上記のコードは、次のようにも記述できます。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 3px solid black;
            margin: 10px 0px 0px 10px;
            transition-property: width, background, transform;
            transition-duration: .25s, 1s, 2s;
            transition-timing-function: linear, ease, ease;
            transition-delay: 1.9s, 2s, 0s;
        }
        div:hover {
            width: 200px;
            background-color: blue;
            transform: rotate(180deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
 

「詳細CSSトランジション（トランジション効果）」についてわかりやすく解説！絶対に観るべきベスト2動画

CSSアニメーション解説！transitionプロパティを現場で使えるようになろう
https://www.youtube-nocookie.com/watch?v=AcG9T2BRA6E&pp=ygVF6Kmz57SwQ1NT44OI44Op44Oz44K444K344On44Oz77yI44OI44Op44Oz44K444K344On44Oz5Yq55p6c77yJJmhsPUpB

最新記事一覧

関連記事一覧