轉場

兩點之間變化的影格補禎

demo

限制

兩點必須是確切數值轉換

無效範例

.f1 {
    width: auto;

    &:hover {
        width: 100px;
    }
}

.f2 {
    display: block;

    &.hide {
        didplay: none;
    }
}

auto 並非確切的數值

display 顯示方式變化也無法補禎

補禎屬性

兩點變化可能包含許多屬性，此屬性可設定特定屬性進行補禎

宣告

transition-property: height; /* 單屬性 */
transition-property: height, width; /* 多屬性 */
transition-property: all; /* 預設 */
transition-property: none;

demo

補禎時間

兩點變化補禎時間

宣告

transition-duration: 0.5s;
transition-duration: 500ms;

延遲執行

兩點變化延遲執行

宣告

transition-delay: 0.5s;
transition-delay: 500ms;

速度曲線

兩點變化補禎速度曲線

宣告

transition-timing-function: linear; /* 均速 */
transition-timing-function: ease; /* 緩入，中間快，緩出，預設值 */
transition-timing-function: ease-in; /* 緩入 */
transition-timing-function: ease-out; /* 緩出 */
transition-timing-function: ease-in-out; /* 緩入緩出 */
transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); /* 貝茲曲線 */

特價條圖片滑順放大

demo

.product-discount{
    &:hover {
        .product-image > div:first-child {
            transform: scale(2);
            transition: all 1s;
        }
    }
}