web前端开发做简单动画（前端实现补间动画效果）

web前端开发做简单动画（前端实现补间动画效果）我们会发现有个问题，这压根就不像在跑，这像在滚是吧？其实我们会发现，用我们这种普节动画是不合适的，按正常的情况，它应该是这个样子，应该是哒哒哒哒。我想要的是这个样子，那我们就用逐帧动画。其实动画里面是有分两种动画的。逐帧动画一种叫做逐帧动画，补间动画。一种我们叫做补间动画。这个就是一秒钟动一次的，这种我们称之为逐帧动画，一种哎哒哒哒哒。一直在走的这种逐帧动画，特别适合于做这种背景图片的变化。那逐帧动画怎么来做？第一个这个是不变的，为什么是1680？因为我们这个图的长度是1680。第二步，默认的他有一个叫做速度曲线，是不是叫easy！但是你写完之后效果是不好看的。我要把它改成逐帧动画。逐帧动画是用steps。这个意思就是我这个动画分比不完成。这个step就是不的意思，取决于这个图里面有几个小人，好数一数一共有几个？那我们二话不说把这么再来看，能看明白了吗？这就是可以来这么慢慢奔跑了。老师这费

前端教程：3分钟带你实现动画效果。

然后我们来做这么一种效果，来做一个小人物奔跑的一个效果。咱们以前的动画片是不是都是，然后按照一定速度播放，是不是才形成一个小动画呀？

我们这是不是一个小素材。这个小图片建一个140像素的一个盒子，我把它放进去就行了。来我们讲一下动画的原理。按照一定速度的播放，你的目光不要看别的，就只看盒子内就行了。他作为这个盒子的背景，就只能在盒子内显示。你看我按照一定的速度在播放，你会发现这个小人物，在里面是不同的形态，它在走起来的时候，就相当于一个奔跑的效果。

所以说它的原理是这个样子。拿一个盒子，要作为背景图片，让图片动起来是不是就行了。我现在是不是还让我们叫他.box，box准备好，box它的宽度是140PX，高度也是个140bgc，然后我先去加个粉色，确认一下他是有的。这个盒子是不是有了，做一个动画效果。

先添加这个图片，他不是用的这个，而是用的一张背景图，我加上background，url(./images/)，下面叫做什么？bg.png。一个小人是不是出来了？我需要把这个背景图，是不是连续不断的做动画就行了。

一个盒子插入这张图片，左对齐还是右对齐，是不是左对齐是第一个图，所以是个单脚发现了吗？是个单脚，但是我让我这个图是不是快速的播放就行了。

也就说我说动的是背景图，背景图片的位置，背景图片是通过什么来移动的？说背景位置，那这个图我们来看一看，这个图是多宽，16801680宽。我让他往左边走1680像素。我要动背景位置然后，我要做动画，来自动播放。好动画使用是不是分两步，先去定义动画。这个小人奔跑，不需要我鼠标经过，他一直在跑。@key franes，我叫move行不行，起始状态和结束状态可以用，from to，给小to就可以了。

从哪个位置？其实from是不是可以省掉的，但是我们写上吧。commonedieX，0像素。肌酐-position。因为我们用的是背景图片，背景图片从0是不是走到多少就行了。然后to走到哪？1680像素对不对？从右往左走，你站在X轴的角度来说，是不是往左走是负值。所以说这个地方一定是负的1680像素。我讲到这能不能听懂，只是定义动画，要不要调用，你还没告诉人家，到底哪个盒子用呢？调用动画。animation，然后上秒来个3秒可不可以？

我们会发现有个问题，这压根就不像在跑，这像在滚是吧？其实我们会发现，用我们这种普节动画是不合适的，按正常的情况，它应该是这个样子，应该是哒哒哒哒。我想要的是这个样子，那我们就用逐帧动画。其实动画里面是有分两种动画的。逐帧动画一种叫做逐帧动画，补间动画。一种我们叫做补间动画。这个就是一秒钟动一次的，这种我们称之为逐帧动画，一种哎哒哒哒哒。一直在走的这种逐帧动画，特别适合于做这种背景图片的变化。那逐帧动画怎么来做？第一个这个是不变的，为什么是1680？因为我们这个图的长度是1680。第二步，默认的他有一个叫做速度曲线，是不是叫easy！但是你写完之后效果是不好看的。我要把它改成逐帧动画。逐帧动画是用steps。这个意思就是我这个动画分比不完成。这个step就是不的意思，取决于这个图里面有几个小人，好数一数一共有几个？那我们二话不说把这么再来看，能看明白了吗？这就是可以来这么慢慢奔跑了。老师这费劲的，你干脆做个gif动画不就行了吗？这要比gif动画好在什么地方？它这个奔跑的速度是可调的。gif动画一旦写完无法更改，而我们这个取决于这个时间，你改成一个.3S，你看，这速度是不是就流畅一些了。