前端 - css3动画怎样对帧的理解？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

前端 - css3动画怎样对帧的理解？

PHP中文网 2017-04-17 11:35:36

[CSS3讨论组]

655

第一种：

@keyframes slow {
        0% {
            background-position: -0px -291px;
        }
        25% {
            background-position: -602px -0px;
        }
        50% {
            background-position: -302px -291px;
        }
        75% {
            background-position: -151px -291px;
        }
        100% {
            background-position: -0px -291px;
        }
    }
     /*动画切换的方式是一帧一帧的改变*/
        -webkit-animation-timing-function: steps(1, start);

第二种：

$spriteWidth: 140px; // 精灵宽度 
@keyframes run {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -($spriteWidth * 12) 0; // 12帧
  }
}
#sprite {
  width: $spriteWidth;
  height: 144px;
  background: url("../images/sprite.png") 0 0 no-repeat;
  animation: run 0.6s steps(12) infinite;
}

1，什么叫“一帧一帧的改变”， steps(1, start);该如何理解？
2，第二种直接“-($spriteWidth * 12) 0”我就看不懂了，为什么这样写？

PHP中文网

认证0级讲师

全部回复(2)

PHP中文网2017-04-17 11:37:36 2楼

1. 什么叫“一帧一帧的改变”， steps(1, start);该如何理解？

animation-timing-function 中 steps 的用法参见这篇
steps 详解

2. 第二种直接“-($spriteWidth * 12) 0”我就看不懂了，为什么这样写？

首先显然这是 Scss 文件（一种 css 预编译文件）
定义了一个变量：$spriteWidth
-($spriteWidth * 12) 这句就是一个运算呀 => -(140px*12)

赞 +0

添加回复

阿神2017-04-17 11:37:36 1楼

1: steps(1, start)我在MDN上刚好看到一个解释

This keyword represents the timing function steps(1, start). Using this timing function, the animation jumps immediately to the end state and stay in that position until the end of the animation.

就是说你的动画帧一开始就马上跳到结束了，所以你看见的是keyframes里面5个帧一帧一帧地切换。如果没有steps(1, start)，就会是一个平滑移动的效果。

2: -($spriteWidth * 12)应该是指把你这个动画分成12帧，每一帧你的背景右移-($spriteWidth * 12)这个长度

赞 +0

添加回复