hugh 的个人博客

1、首先看个效果，进度条

代码:

<style>
    @keyframes  spkf{
       0% {width:10px;}
       100% {width: 300px;}
    }
    .s1{
        width: 100px;
        height: 20px;
        background: red;
        animation: spkf 10s steps(100) infinite;
    }
</style>
<div>
    <div class="s1"></div>
</div>

2、steps

例1中，将动画平均分成了100份，在10s内变化完成一个循环

效果2：计时

代码：

  @keyframes spnum {
        0% {background-position: -57px -35px;}
        100% {background-position: -544px -35px;}
    }
    .s2{
        width: 80px;
        height: 140px;
        background: url("
http://tools.uproject.cn/upload/article/b093ccff2875.jpg
") -57px -35px no-repeat;
        animation: spnum 5s steps(5) infinite;
    }
<div class="s2"></div>