如何用CSS Keyframes实现SVG Logo指定时序的循环动画？

要实现你需要的循环时序，我们需要重新计算关键帧的百分比节点，匹配4秒暂停→2秒水平旋转→4秒暂停→2秒垂直旋转的12秒总周期。以下是修改后的完整SVG代码：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20">
<defs><style>
.txtme {
  transform-origin: center;
  /* 移除初始延迟，让动画从第一个暂停阶段开始 */
  animation: anime 12s linear infinite;
}
@keyframes anime {
  /* 0% - 33.33%：前4秒保持原图（暂停） */
  0%, 33.33% { 
    transform: none; 
  }
  /* 33.33% - 50%：用2秒完成水平旋转（绕Y轴转360度） */
  50% { 
    transform: rotate3d(0, 1, 0, 360deg); 
  }
  /* 50% - 83.33%：接下来4秒保持原图（暂停） */
  50%, 83.33% { 
    transform: none; 
  }
  /* 83.33% - 100%：最后2秒完成垂直旋转（绕X轴转360度） */
  100% { 
    transform: rotate3d(1, 0, 0, 360deg); 
  }
}
</style></defs>
<text class="txtme" fill="#000" x="25%" y="50%" style="font-family:sans-serif;">MyLogo</text>
</svg>

关键调整说明： #

• 总周期匹配：保持12秒总时长（4+2+4+2），完全对应需求的时序分段
• 关键帧百分比计算：
  • 前4秒占总周期的 4/12 ≈ 33.33%，0%到33.33%区间维持初始状态
  • 水平旋转的2秒占 2/12 ≈ 16.67%，从33.33%到50%完成旋转动作
  • 中间暂停的4秒占 4/12 ≈ 33.33%，50%到83.33%区间维持初始状态
  • 垂直旋转的2秒占 2/12 ≈ 16.67%，从83.33%到100%完成旋转动作
• 移除初始延迟：原代码的3s延迟会打断初始暂停的时序逻辑，直接移除后动画从第一个暂停阶段启动
• 匀速旋转保障：保留linear时序函数，确保旋转过程平滑匀速

调整后动画会严格按照需求循环：暂停显示原图→水平旋转→暂停显示原图→垂直旋转→无限重复。

内容的提问来源于stack exchange，提问作者ucsendre