Step of CSS3

Step of CSS3

现在先用一个盒子来学习step的相关特性：

@keyframes change-color {
    0%{
        background-color: red;
    }
    25%{
        background-color: green;
    }
    50%{
        background-color: blue;
    }
    75%{
        background-color: black;
    }
    100%{
        background-color: #fff;
    }
}

div{
    width: 100px;
    height: 100px;
    background-color: red;
    animation: change-color 4s steps(1, end);
}

运行后会发现，每两个关键帧之间，没有了中间的过渡，直接跳转了，如果将1换成2或者更大的数就会在两个关键帧直间再加一帧，传24的话就看起来是连贯动画了。

但是还会发现，最后一个关键帧不显示了，也就是没有白色的那帧，那是因为steps里面传的是end，那么end和start又有什么区别呢：

end

保留当前帧状态，直到这段动画时间结束。

所以如果想显示最后一帧的状态，并且不需要循环的话，就加一个forward属性值，最后一帧就可以显示出来了。

steps(1, end); === step-end

start

保留下一帧状态，直到这段动画时间结束。

start不显示的是第一帧，这个属性值没有end使用的多，而且没有办法去弥补缺失第一帧的这个缺陷。

steps(1, start); === step-start

---

用两个运动起来的盒子就可以更直观的形式展现出两个属性值的区别

@keyframes run {
    0%{
        left:0;
    }
    25%{
        left:100px;
    }
    50%{
        left:200px;
    }
    75%{
        left:300px;
    }
    100%{
        left:400px;
    }
}

.demo1, .demo2{
    position:absolute;
    left: 0;
    background-color: black;
    width: 100px;
    height: 100px;
    color:#fff;
}
.demo1{
    animation: run 4s step-end forwards;
}
.demo2{
    top:100px;
    animation: run 4s step-start;
}

应用

打字效果

<div>abcdef ghij</div>

@keyframes cursor{
    0%{
        border-left-color: rgba(0,0,0,0);
    }
    50%{
        border-left-color: rgba(0,0,0,1);
    }
    100%{
        border-left-color: rgba(0,0,0,0);
    }
}
@keyframes cover{
    0%{
        left:0;
    }
    100%{
        left:100%;
    }
}
div{
    position: relative;
    display: inline-block;
    height:100px;
    font-size:80px;
    line-height: 100px;
    font-family: monospace;
}
div::after{
    content:"";
    position: absolute;
    left:0;
    top:10px;
    height:90px;
    width:100%;
    background-color: #fff;
    border-left:2px solid black;
    box-sizing:border-box;
    animation:cursor 1s steps(1, end) infinite, cover 12s steps(12, end);
}

钟表效果

<div class='clock'>
    <div class="second"></div>
    <div class="minute"></div>
    <div class="hour"></div>
</div>

@keyframes secondrun{
    0%{
        transform:rotate(180deg);
    }
    100%{
        transform:rotate(540deg);   
    }
}
@keyframes minuterun{
    0%{
        transform: rotate(180deg);
    }
    100%{
        transform: rotate(540deg);
    }
}
div.clock{
    position: relative;
    width:512px;
    height:512px;
    background-image: url(clock.png);
    background-size:cover;
    background-repeat: no-repeat;
}
div.second{
    position: absolute;
    left:247px;
    top:180px;
    width:16px;
    height:278px;
    background-image: url(second.png);
    background-size:cover;
    background-repeat: no-repeat;
    transform-origin:center 76px;
    transform:rotate(180deg);
    z-index: 3;
    animation:secondrun 60s steps(60, end) infinite;
}
div.minute{
    position: absolute;
    transform-origin:center 16px;
    left:238px;
    top:240px;
    width:32px;
    height:218px;
    background-image: url(minute.png);
    background-size:cover;
    background-repeat: no-repeat;
    transform:rotate(180deg);
    z-index: 2;
    animation:minuterun 3600s steps(60, end);
}
div.hour{
    position: absolute;
    transform-origin:center 16px;
    left:238px;
    top:240px;
    width:32px;
    height:148px;
    background-image: url(hour.png);
    background-size:cover;
    background-repeat: no-repeat;
    z-index: 1;
}

跑马效果

<div class="horse"></div>

@keyframes run{
    0%{
        background-position: 0 0;

    }
    100%{
        background-position:-2400px 0;
    }
}

div{
    width:200px;
    height:100px;
    background-image:url(horse.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    animation:run .5s steps(12, end) infinite;
}

---

下面是素材：