CSS過渡特效

概述   在CSS中用於設定過渡特效的屬性是 transition，該屬性允許CSS的屬性值在一定的時間區間內平滑地過渡，這就拜託了我們在CSS3版本標準之前對“JavaScript”和“Flash”的依賴，使頁面的效能得以提升。這種效果可以在滑鼠懸浮（:hover）、滑鼠單擊（:active）、表單元素獲得焦點（:focus）或對元素任何改變以及在JavaScript中某些事件執行後觸發，並圓滑（若不對時間曲線進行特殊設定）地以動畫效果改變CSS的屬性值。

該屬效能夠對CSS中絕大部分屬性的變化生效，但不能對CSS屬性值不為“數值”的屬性生效，即只有當屬性的值為一個數值的時候，該屬性才能生效。數值包含“純數字”、“畫素數值”、“百分比數值”、“十六進位制數值”等CSS屬性的值為數值的元素生效。如：當元素的寬度為“width:100px”變化為“width:200px”的時候過渡效果能夠生效，但當元素的寬度為“width:100px”變化為“width:auto”的時候，就不會產生過渡效果了。當一個元素的字型顏色為“#f31e1d”，變化為“#2396fd”的時候過渡有效，但當它的字型顏色由“#f31e1d”變為“transparent”的時候過渡就不會產生效果了。這一點在使用中需要留意。

該屬性包含多個分支屬性，主要有：“過渡CSS屬性名稱”、“過渡執行時間”、“過渡時間速率曲線”和“過渡的延時執行”四個主要內容，接下來我們對它的各分支屬性進行詳細的學習。

提示：transition 屬性只對數值型別屬性生效。

transition 分支屬性 1、transition-property   過渡屬性，該屬性是用來指定當元素其中一個屬性改變時執行的過渡動畫效果，該屬性有三種類型的值：

none：將過渡效果設定為“無過渡效果”，或停止當前過渡效果。 all：（預設）為所支援的所有CSS屬性在值變化時執行動畫過渡效果。 [property name]：指定一個或多個屬性名稱列表，以逗號“,”進行分隔，當指定的屬性產生變化時，為其執行指定屬性的動畫過渡效果。 2、transition-duration

3、transition-timing-function   過渡線性規律（又稱時間曲線），該屬性允許你根據時間的推進去改變屬性值的變換速率，目前它可能夠設定6個型別的值：

ease：預設值，逐漸變慢 linear：勻速 ease-in：加速 ease-out：減速 ease-in-out：先加速，後減速 cubic-bezier([引數])：定義一個時間曲線（貝塞爾曲線），可以為其配置四個引數，前兩個引數為“ x1 ”和“ x2 ”，定義“開始控制點”，後兩個引數為“ y1 ”和“ y2 ”，定義“結束控制點”。而“開始點”和“結束點”是通過這兩條“轉換點控制軸”分別去調整兩個點來實現曲線的變化的，如果對Photoshop裡面的“鋼筆工具”的“路徑”比較熟悉的話，稍加聯想應該能理解到這個時間曲線軸的改變原理，這種曲線叫做“貝塞爾曲線”。參考示例 4、transition-delay

5、transition   過渡動畫組合值屬性，其語法形式為：

transition: property duration timing-function delay; transition 示例 1、單個屬性變化

<div class="box"></div>

.box {
    width:  160px;
    height: 160px;
    background-color: #ff0000;
    /*過渡效果*/
    transition: background-color .5s linear 0s;
}
.box:hover {
    background-color: #000;
}

2、多個屬性變化 -> 單獨設定

<div class="box"></div>

.box {
    width:  160px;
    height: 160px;
    background-color: #ff0000;
    /*過渡效果*/
    transition: background-color .5s ease-out 0s, border-radius .35s ease-in 0s;
}
.box:hover {
    background-color: #000;
    border-radius: 80px;
}

3、多個屬性變化 -> all

<div class="box"></div>

.box {
    width:  160px;
    height: 160px;
    background-color: #ff0000;
    /*過渡效果*/
    transition: all .25s linear 0s;
}
.box:hover {
    background-color: #000;
    border-radius: 80px;
    opacity: .25;
    /*縮放*/
    transform: scale(.5);
}

4、仿3D 凸起效果

<div class="box">
    <span>CHINA</span>
</div>

body {
    background-color: rgb(245, 245, 245);
}

div.box {
    width:  200px;
    height: 325px;
    background-color: #fff;

    /*過渡效果*/
    transition: all .25s linear;

    display: flex;
    justify-content: center;
    align-items: center;

    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
}
div.box span {
    color: #ff0000;
    letter-spacing: 5px;
    font-size: 30px;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;

    transition: all .25s linear;
}

div.box:hover {
    transform: translateY(-1px);
    box-shadow: 2px 2px 10px 2px #808080;
}
div.box:hover > span {
    font-size: 35px;
}