Javascript 动画帧

有谁能帮我了解如何使用js或css制作帧动画。实际上，我正在尝试实现与相同的动画。我对道路动画的工作原理感到困惑。是否有插件可以做到这一点，或者只是js和css

我把它作为一种图像（SVG）格式

我用纯HTML5和CSS3动画制作它

使用类

.path

和

@keyframes

不幸的是，IE和safari中不支持

代码如下：

.line{
宽度：65%；
保证金：0自动；
}
svg{
显示：块；
}
#svg path.path{
行程：3000；
行程偏移：4000；
笔画宽度：2；
-webkit动画：直线向前；
-moz动画：直线向前；
-ms动画：直线向前；
-0-动画：直线向前5s；
动画：直线向前；
}
@关键帧线{
表格{stroke dashoffset:4000；}
到{stroke dashoffset:0；}
}
@-webkit关键帧线{
表格{stroke dashoffset:4000；}
到{stroke dashoffset:0；}
}
@-moz为线条设置关键帧{
表格{stroke dashoffset:4000；}
到{stroke dashoffset:0；}
}
@-ms关键帧线{
表格{stroke dashoffset:4000；}
到{stroke dashoffset:0；}
}
@-o-关键帧线{
表格{stroke dashoffset:4000；}
到{stroke dashoffset:0；}
}

这是一个预先设置动画的图形，其中每个帧都合并到一个精灵表中（我刚刚瞥了一眼）。您还可以使用SVG和canvas来实现这一点。这是通过使用Kinograph插件完成的（深入查看），或者总结一下：该插件驱动精灵表。动画本身是如何制作的还不清楚（这里有很多选项…@K3N-我使用了你提到的插件，它在chrome中运行良好。在firefox和safari中，问题是当第一次加载页面时，脚本可以工作，但从第二次开始，它就失败了。太棒了。这正是我想要的。但是，您能告诉我如何在svg中生成如此平滑的曲线吗？我画了一个类似的图形，但曲线非常清晰。因为我有触摸屏，所以我用手将其保存为图像，然后使用任何在线网站，如adobe illstrator。既然你喜欢我的答案，请也做最好的答案。谢谢。（…我没有。但是无论如何，非常感谢：）