Javascript 仅当另一个CSS动画已完成时才启动CSS动画

我有2个方块，我想开始与红色方块相关的动画，但前提是与蓝色方块相关的动画已经完成

最终结果将是一个动画循环。 我该怎么做

.盒子{ 宽度：100px； 高度：100px； 位置：绝对位置； } 瑞德先生{ 背景色：红色； 最高：40%； -webkit动画名称：示例_red；/*Safari 4.0-8.0*/ -webkit动画持续时间：1s；/*Safari 4.0-8.0*/ 动画名称：示例_red； 动画持续时间：1s； } 蓝先生{ 背景颜色：蓝色； 排名前10%； -webkit动画名称：示例_blue；/*Safari 4.0-8.0*/ -webkit动画持续时间：1s；/*Safari 4.0-8.0*/ 动画名称：example_blue； 动画持续时间：1s； } /*Safari 4.0-8.0*/ @-webkit关键帧示例\u红色{ 0%{顶部：30%；} 80%{排名前42%；} 100%{top:40%；} } /*标准语法*/ @关键帧示例\u红色{ 0%{顶部：30%；} 80%{排名前42%；} 100%{top:40%；} } /*Safari 4.0-8.0*/ @-webkit关键帧示例\u蓝色{ 0%{顶部：5%；} 80%{前12%；} 100%{前10%；} } /*标准语法*/ @关键帧示例\u蓝色{ 0%{顶部：5%；} 80%{前12%；} 100%{前10%；} } 在这里，我将CSS.red规则分成两部分，一部分用于颜色和大小，另一部分用于指定动画。我也做了同样的，蓝色的

然后，在animationEnd事件中，只需为两个.box元素切换.animation类，使其具有无限循环效果

加载时，需要通过将动画类添加到两个.box中的一个来启动。您可以像我一样使用jQuery，也可以直接在标记中使用jQuery

$.box.onanimationEnd msAnimationEnd OAAnimationEnd webkitAnimationEnd，函数{ $.box.toggleClassanimation； }; $.red.addClassanimation； .盒子{ 宽度：100px； 高度：100px； 位置：绝对位置； } 瑞德先生{ 背景色：红色； 最高：40%； } 红色。动画{ -webkit动画名称：示例_red；/*Safari 4.0-8.0*/ -webkit动画持续时间：1s；/*Safari 4.0-8.0*/ 动画名称：示例_red； 动画持续时间：1s； } 蓝先生{ 背景颜色：蓝色； 排名前10%； } .蓝色.动画{ -webkit动画名称：示例_blue；/*Safari 4.0-8.0*/ -webkit动画持续时间：1s；/*Safari 4.0-8.0*/ 动画名称：example_blue； 动画持续时间：1s； } /*Safari 4.0-8.0*/ @-webkit关键帧示例\u红色{ 0%{顶部：30%；} 80%{排名前42%；} 100%{top:40%；} } /*标准语法*/ @关键帧示例\u红色{ 0%{顶部：30%；} 80%{排名前42%；} 100%{top:40%；} } /*Safari 4.0-8.0*/ @-webkit关键帧示例\u蓝色{ 0%{顶部：5%；} 80%{前12%；} 100%{前10%；} } /*标准语法*/ @关键帧示例\u蓝色{ 0%{顶部：5%；} 80%{前12%；} 100%{前10%；} }

---

给第二个动画添加一个延迟等于第一个动画的持续时间？是的，它是逻辑的，但是我想要一些不需要计算动画持续时间的东西。考虑事件动画结束，然后谢谢你的回答和解释：你能解释我在哪里可以放置第三平方动画吗？说到JS？谢谢，你真是太好了，你能解释一下这两行是如何工作的吗：1 boxCounter=boxCounter+1%$.box.length；2$.box.eqboxCounter.addClassanimation；简言之有3个盒子。但针对它们的指数是以零为基础的。所以我们必须数到0，1，2，0，1，2，0，1。。。。如果您有boxCounter=2。加1等于3。我们在射程之外！但是3除以3的余数是零。这就是诀窍。查找和，它以索引为目标。