如何用JavaScript制作时间轴动画效果？

本文共计2198个文字，预计阅读时间需要9分钟。

目录 + CSS动画 + 什么是时间轴动画？ + 动画对象 + 动画函数 + 思考 + 总结 + CSS动画 + 在前端开发中，一些简单的动画效果常常使用CSS3的@keyframes来实现，例如：

.div1 { width: 100px; height: 100px; background-color: red;}

目录

• css动画
• 什么是时间轴动画？
• 动画对象
• 动画函数
• 思考
• 总结

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。