CSS3 非线性时间函数应用

（网络图片、如侵权必删除）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .fire{
                width:166.7px;
                height:296px;
                background:url(img/img4.jpg) no-repeat;
                animation: round 1s steps(9) infinite alternate;//非线性时间 step(n)
            }
            @keyframes round{
                100%{
                    background-position-x:-1500px ;
                }
                
            }
        </style>
    </head>
    <body>
        <div class="fire"></div>
    </body>
</html>

效果图

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/liangtao999/p/11807041.html