前端 利用steps设置不连续动画

1.准备

制作横向的雪碧图，例如11张小图拼成一张雪碧图

2.设置动画，背景位置变化

@keyframes gifts-animation {

            0% {

                background-position: 0 0;

            }

            100% {

                background-position: 100% 0;

            }

        }

3.应用动画，需要注意steps的数值要设置成比雪碧图的小图少1，这里应该是11-1=10

        .gifts {

            background: url(icon-gifts-active.png) no-repeat 0 0;

             animation: gifts-animation steps(10) 10s infinite;

        }