CSS-Animations：步行循环的嵌套动画答案

【问题标题】：CSS-Animations: nested animation for a walk cycleCSS-Animations：步行循环的嵌套动画
【发布时间】：2022-01-29 15:55:10
【问题描述】：

如何打开和关闭嵌套元素中的辅助动画以进行步行循环？

我想让一个虫子四处爬行、停止、转身、走路等动画。我的虫子由一个带有身体 PNG 的 div 和两个每个三腿的 PNG 组成。我将 bug div 中的三个 PNG 堆叠在一起，并使用一个小的 CSS 循环关键帧动画，我将腿部 PNG 旋转了几度，使其看起来非常像散步。这很好用。

我还可以在小腿移动时使用关键帧动画在屏幕上移动整个 bug（包含三个 img 的 div）。到目前为止很棒！

但是：当 bug div 暂停（由其动画定义）时，bug div inside 的腿循环也需要停止。我该如何解决这个问题？我不能用另一个动画来停止腿部动画，对吧？

还是我想错了？

【问题讨论】：

【解决方案1】：

自己找到了解决方法：

创建了一只腿处于静止位置的休息虫的图像
应用与摆动腿的臭虫相同的定位和动画。这样它们就可以在彼此的顶部完全移动。
为每个错误创建一个额外的独立动画，在适当的时间打开和关闭不透明度，以便静态错误仅在它不移动时可见，而摆动的错误仅在它移动时可见。这些动画的长度与运动的动画具有相同的时间和停止。

【讨论】：