hugh 的个人博客

Everyday is a new day

css3动画steps属性

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>


标题:css3动画steps属性
作者:hugh0524
地址:https://blog.uproject.cn/articles/2016/06/30/1467280814461.html