CSS中transition以及時間函數steps()

概念

transition：過渡、轉變

transition 是個簡寫屬性，用于設定四個過渡屬性

• transition-property 規定設定過渡效果的css屬性的名稱
• transition-duration 規定完成過渡效果需要多少秒或多少毫秒 必填項 必須帶機關
• transition-timing-function 規定速度效果的速度曲線 eg：貝塞爾曲線 linear ease等
• transition-delay 規定過渡效果多少毫秒之後開始。預設為0

eg：

.test{
    height: px;
    width: px;
    background-color: pink;
    transition: s s;
}    
.test:hover{
    width: px;
}
           

transiton-property

值：none| all | [,]*

預設值：all

應用于：所有元素（即所有元素都有transition屬性，跟所有block元素有寬高屬性一樣）

none:沒有指定任何樣式

all:表示指定元素所有支援過渡屬性的樣式，多個時用逗号隔開

可過渡的樣式

不是所有的CSS樣式值都可以過渡，隻有具有中間值的屬性才具備過渡效果

顔色: color background-color border-color outline-color
位置: backround-position left right top bottom
長度:
    []max-height min-height max-width min-width height width
    []border-width margin padding outline-width outline-offset
    []font-size line-height text-indent vertical-align  
    []border-spacing letter-spacing word-spacing
數字: opacity visibility z-index font-weight zoom
組合: text-shadow transform box-shadow clip
其他: gradient
           

transition-timing-function

bezier函數

表示為線性變化，很勻速的過程

ease: 開始和結束慢，中間快。相當于cubic-bezier(0.25,0.1,0.25,1)
linear: 勻速。相當于cubic-bezier(0,0,1,1)
ease-in: 開始慢。相當于cubic-bezier(0.42,0,1,1)
ease-out: 結束慢。相當于cubic-bezier(0,0,0.58,1)
ease-in-out: 和ease類似，但比ease幅度大。相當于cubic-bezier(0.42,0,0.58,1)
step-start: 直接位于結束處。相當于steps(1,start)
step-end: 位于開始處經過時間間隔後結束。相當于steps(1,end)
           

steps函數

步進函數将過渡時間分成大小相等的時間時隔來運作

沒有過度效果，而是一幀一幀的變化，integer等于幾就分成幾幀，階躍函數

steps(<integer>[,start| end]?)

<integer>:用于指定間隔個數（該值隻能是正整數）
第二個參數可選，預設是end,表示開始值保持一次，若參數為start，表示開始值不保持
           

eg：

#div {
    width: px;
    height: px;
    animation-name: skyset;
    animation-duration: ms;
    animation-iteration-count: ;
    border: px solid blue;
    animation-timing-function: linear;
    -webkit-animation-name: skyset;
    -webkit-animation-duration: ms;
    -webkit-animation-iteration-count: ;
    -webkit-animation-timing-function: steps(, end);
}

@-webkit-keyframes skyset {
    0% {
        width: px;
    }
    50% {
        width: px;
    }
    100% {
        width: px;    
    }
}

           

integer:

動畫效果: 0%-50% 之間的過渡效果，變化五次 即從100px->150px 變化5次

50%-100%之間的過渡效果變化五次，即從150px->200px 變化5次

注：steps的設定是針對兩個關鍵幀之間的的，而非整個動畫。

重點是start和end

start | end

0% {
    background: red
}
30% {
    background: yellow
}
60% {
    background: blue;
}
100% {
    background: green;
}

           

原了解釋：

（1，start | end）

四個關鍵幀           一共變化四次   div本身是沒有背景色的，是以最終的背景是無色。但是隻變化四次，有四種顔色，加上無色，一共五種狀态，是以需要丢棄一種狀态。

start   黃、藍、綠、無色               把第一幀的效果去掉，第二幀的效果為填充效果
end    紅、黃、藍、無色               把最後一幀的效果去掉，第一幀的效果為填充效果
           

(2,start | end)

即每個關鍵幀都分成兩次變化完成，則一共有七次變化。
七幀      一共變化七次，  div本身沒有顔色，是以最終的背景無色。但是，隻變化七次，有七種顔色，加上無色，一種八種狀态，是以需要丢棄一種狀态

start   橙、黃、灰、藍、深灰藍、綠、無色         
原理：去掉第一幀的效果，


end    紅、橙、黃、灰、藍、深灰藍、無色
原理：去掉最後一幀的效果