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
复制代码

注：若有不对的地方，还望大家指出。