使用steps实现逐帧动画

开发中，一般配合精灵图实现动画效果。

将动画过程分成N份进行：

代码语言：javascript复制

animation-timing-function: steps(N)；

精灵动画制作步骤

1.准备显示区域

设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图。

代码语言：javascript复制

      /* 1680/12 : 保证显示区域的尺寸和一个精灵小图的尺寸相同 */
      width: 140px;
      height: 140px;

2.定义动画

改变背景图的位置，移动的距离就是精灵图的宽度。

动画的开始状态和盒子的默认样式相同的, 可以省略开始状态的 form代码。

代码语言：javascript复制

    @keyframes move {
        from {
          background-position: 0 0;
        } 
        to {
          /* 1680: 精灵图的宽度 */
          background-position:  -1680px 0;
        }
    }

3.使用动画

添加速度曲线steps(N)，N与精灵图上小图个数相同，并添加无限重复效果。

代码语言：javascript复制

 animation: move 1s steps(12) infinite;

4.多个动画

此时小人是在原地跑，如果想让小人跑远需要在精灵动画上再添加一个盒子位移动画。

代码语言：javascript复制

@keyframes run {
            to {
                transform: translateX(800px);
            }

然后给一个元素添加多个动画效果，多个动画之间用逗号隔开。

代码语言：javascript复制

  animation: move 1s steps(12) infinite, run 1s forwards;

form 动画

0 人点赞