css 3の移行

テキストアドレス
概要
transitiondeの機能:cssの属性値が一定の時間区間で滑らかな遷移を実現することである.Javascript処罰のほかに、いくつかの偽クラスがトリガーされます::hover;:focus; :active; :target; :checked.
遷移を作成するには

デフォルトスタイルで要素の初期状態を宣言するスタイル.

遷移要素の最終状態スタイルを宣言します.

デフォルトスタイルでは、遷移関数を追加することによって、いくつかの異なるスタイルが追加されます.

        .transition{
        /*   ：    */
            background:  #8ec63f;
            width:100px;
            height: 100px;
            border-radius: .5em;
        /*   ：      */
            -webkit-transition: background 2s linear 2s, border-radius 3s ease-in-out;
            -o-transition: background 2s linear 2s, border-radius 3s ease-in-out;
            transition: background 2s linear 2s, border-radius 3s ease-in-out;
        }
        /*   ：      */
        .transition:hover{
            background: #f7941d;
            border-radius: 50%;
        }

互換性
chrome
IE
opera
safari
firefox
4.0+
10+
10.5+
3.1+
4.0+
もちろんサポートはいいですが、使うときはブラウザの接頭辞をつけます.
遷移属性の詳細
複合プロパティ:

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

transition-property:遷移を指定するcss属性

transition-duration:移行に要する時間

transition-timing-function:遷移関数

transition-delay:遷移開始の遅延時間

transition-property
1.値:all/none/single-transition-property 2.single-transition-propertyについて;すべての属性値がこれを使用できるわけではありません.中値属性を持つ属性のみが可能です.3.整理
ツールバーの
値eg
色のプロパティ
background/color...
長さまたはパーセント
word-spacing/width/vertical-align/top../min-width/max-height/line-height/backgroung-position
integer
z-index
number
zoom/opacity/font-weight
へんけい
rotate()/scale()/skew()/translate()
visibility
0~1
影
text-shadow
グラデーショングラデーション:停止するたびに位置と色が変化します.
同じタイプと同じ停止値が必要です
...
...
transition-duration
transition-timing-function
各関数の詳細1.単一の遷移関数ease:デフォルト.速さから遅さに変わる.
linear:均一速度.ease-in:速度がますます速くなり、加速します.
ease-out:ますます遅くなり、減速します.
ease-in-out:加速してから減速し、漸隠効果を示します.
2.三次ベッセル関数の使用方法:

transition-timing-function: cubic-bezier(P0, P1, P2, P3)

カスタム遷移関数
図:カスタム関数の原理がわかります.
単一の遷移関数をcubic‐bezierでカスタマイズできることは明らかである.
3.step()

step(integer,start/end)

1枚の図で説明します.
transition-delay
この属性はtransition-durationと同じように簡単で、省略を続けます.
トリガ遷移
1.擬似要素トリガ

:activeマウスをクリックし、押す必要があります.

:focus

:checked

:hover

input[type="radio"] ~ span{
    width:100px;
    /*display:block;*/
    border:1px solid red;
    transition:width 2s ease-in 1s;
}
input[type="radio"]:checked ~ span{
    width:200px;
}

2.メディアクエリは、この方法をトリガし、異なる画面サイズを実現するときに遷移をスムーズにすることができる.
3.javascriptトリガ
css Dock例まとめ

webkit独自のミラー属性box-reflecの使用方法:

-webkit-box-reflect：none |  ? 
box-reflect：none |  ? 

値の説明:

none:この値はbox-reflectのデフォルト値で、バックグラウンド効果がないことを示します.

:この値はbox-reflectがバックグラウンドを生成する方向を示し、主に以下の値を含む.

above:生成されたバックグラウンドがオブジェクト(原図)の上にあることを示す.

below:生成されたバックグラウンドがオブジェクト(原図)の下にあることを示す.

left:生成されたバックグラウンドがオブジェクト(原図)の左側にあることを示す.

right:生成されたバックグラウンドがオブジェクト(原図)の右側にあることを示す.

offset:生成されたバックグラウンドとオブジェクト(原図)との間隔を設定します.値は、固定されたピクセル値であってもよいし、パーセンテージ値であってもよい.

長さの値を使用して、生成されたバックグラウンドと元の図との間隔を設定します.CSSの長さの単位であれば、この値は負の値を使用できます.

パーセントを使用して、生成されたバックグラウンドと元の図との間隔を設定します.この値には負の値も使用できます.

mask-box-image:バックグラウンドを設定するマスク効果は、背景画像でもグラデーション生成の背景画像でもよい.

-webkit-box-reflect: below -16px -webkit-gradient(
    linear, left top, left bottom,
    from(transparent),
    color-stop(91%, rgba(255, 255, 255, .1)),
    color-stop(91.01%, transparent),
    to(transparent)
);

tooltips効果を模倣

    .dock em {
        position: absolute;
        top: -34px;
        left: 50%;
        display: none;
        width: 150px;
        margin-left: -75px;
        text-align: center;
    }
    .dock em:after {
        content: " ";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -6px;
        width: 0;
        height: 0;
        /*       */
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid rgba(0, 0, 0, .6);
        border-bottom: none;
    }
    .dock em span {
        display: inline-block;
        padding: 5px 12px;
        font-size: 14px;
        font-style: normal;
        color: #FFF;
        background: #000;
        background: rgba(0, 0, 0, .6);
        text-shadow: 1px 1px 1px rgba(0, 0, 0, .9);
        border-radius: 12px;
    }
.dock li:hover em, 
.dock li a:focus em {
    display: block;
}

説明

これは砂漠が書いた「図解css 3」を見るノートシリーズです.ソースコードはすべて本から来ています.

原文は私のブログで同期しています.