steps()的學習

• steps(n)中引數n的理解

1. n是關鍵幀，若steps(5)則會顯示的關鍵幀有五張;
2. animation動畫設定為0%-100%,在steps(5)中，則可理解為(0%-20%),(20%-40%),(40%-60%),(60%-80%),(80%-100%)區段
3. 共有0%,20%,40%,60%,80%,100%這幾幀，只是end/start會決定顯示哪五幀影象

• steps(n,end)中引數end的理解

1. end為預設引數
2. end表示最後一幀的影象不顯示，也就是100%這一幀直接跳過

• steps(n,start)中引數start的理解

1. start需要自己設定
2. start表示第一幀的影象不顯示，也就是0%這一幀直接跳過

舉例

使用

    animation p8 steps(3) 1.5s infinite
    @keyframes p8 
    0%
        background-position 0 0
    100%
        background-position 0 150%
複製程式碼

實際理解為：

1. 3幀 分為(0%-33.3%),(33.3%-66.6%),(66.6%-100%)區段
2. 共0%,33.3%,66.6%,100%這幾幀
3. 預設為end 則是不顯示100%那一幀 (backgroung-position 0 0) (background-position 0 50%) (background-position 0 100%)

animation p8 steps(3) 1.5s infinite
複製程式碼

3. 若設定為start 則是不顯示0%那一幀 (backgroung-position 0 50%) (background-position 0 100%) (background-position 0 150%)

animation: p8 steps(3,start) 1.5s infinite
複製程式碼

注：若有不對的地方，還望大家指出。