JS实现时间轴动画

css动画

在前端开发中，一些简单的动效往往是使用 css3 的 @keyframes 来实现的 ，如：

.div1 {width: 100px;height: 100px;background: red;animation: changeColor 2s;
}
@keyframes changeColor {0% {background: red;}50% {background: yellow;}100% {background: blue;}
} 

假如设定的时间是2s，那么 这段动画的描述是这样的：在2秒内，某元素的背景色由红色变为黄色，又变为蓝色了。

假定有这样一个需求：一个动画共持续4秒，在0-2秒内 div1 从红色变为黄色再变为蓝色，div2 在2-4秒内宽度由100px变为200px。

.div1 {width: 100px;height: 100px;background: red;animation: changeColor 2s forwards;
}
@keyframes changeColor {0% {background: red;}50% {background: yellow;}100% {background: blue;}}
.div2 {width: 100px;height: 100px;background: pink;animation: changeWidth 4s forwards;
}
@keyframes changeWidth {0% {width: 100px} 50% {width: 100px} 100% {width: 200px}} 

看起来好像也还行，那么 div1 在第1秒变色， div2 在2-5秒内变形， div3 在3-7秒内变色变形，div4在4-10秒内旋转…，然后这些一起构成了需求想要的动画效果。这样的话我们要找出整个动画的总时长，然后每个div的运动时间算出相对总时间的百分比区域，然后设定 keyframe 动画。

到这里 keyframes 貌似就有些复杂度了，我们平时一直在用 keyframes，那么 keyframes 或者说动画的本质是什么？

由于人类视觉停留的原理，这样一张张图片连续展示就看起来像动画了，翻书动画或者显示器逐帧刷新显示都是利用了这个原理。在动画创作时，除了像素、2d动画还在逐帧绘制，大多数类型的动画都已在编辑时方便将帧转换为时间进行计算。

keyframes 作为一个高度定制化的产物，只是在名称上对“帧”这个概念进行了保留，它对单个元素的动画编辑是简单方便的。但通过示例二就可以看出，它没有对多元素组合动画进行针对性的设计，代码上 div1 和 div2 是没有逻辑关