高级动画问题（网站）。如何制作像下面网站上的图像动画

Question

http://www.mikimottes.com/ 这就是我要问的网站！ 我学会了如何制作简单的动画。但是当我发现这个网站时，我爱上了它，想学习如何制作这样的网站。我想知道例如图像动画，它们是如何开发的？我有一些建议，它可能与 GIF 有关，但是如何控制 GIF？有时图像的动画会停止，然后某些东西会触发它们进行动画处理。 GIF 似乎是不可能的。好像不是js动画。请协助我解决这个问题。 :)

Answer 1

这些效果基于普通 CSS animations。您可以使用浏览器开发人员工具轻松查看给定动画使用的样式和参数（例如，在 Firefox 中，右键单击动画并 select“检查元素”）。

例如，左上角两个风力涡轮机之间盘旋的蓝色小动物使用此图像制作动画：

要了解它是如何完成的，您可以查看 this blog post

中的示例

我怀疑您需要一些额外的工具，例如像样的绘画程序来自动执行某些步骤（例如，使用图层并从一组图纸中自动生成连续的帧），但我想这可以通过简单的手工完成案例。