CSS堆叠旋转方块hover触发keyframes动画无响应问题求解

• 缺少animation-duration配置：CSS animation属性必须指定动画持续时长，你当前代码未配置该属性，默认值为0s，动画不会触发播放。
• 属性值错配：你把动画时长的数值错误赋值给了animation-timing-function属性，该属性用于控制动画的速度曲线（可选值为linear/ease/ease-in-out等），不接收时间作为有效值。
• 边框变化无对比：.main-animation-box初始边框就设置为橙色，动画10%阶段的边框变更没有视觉差异，看不到递进效果。
• 关键帧状态不全：@keyframes未定义初始（0%）和结束（100%）状态，不同浏览器可能出现默认状态不一致的兼容问题。

修复后可运行代码 #

/* 调整初始边框为非橙色，方便看出动画递进效果 */
.main-animation-box {
  border: 2px solid #ccc;
  height: 30vh;
  width: 16vw;
  position: absolute;
}

.email-sub-box:hover .main-animation-box-1 {
  animation: box-rotate 5s infinite ease;
  animation-delay: 0s;
}

.email-sub-box:hover .main-animation-box-2 {
  animation: box-rotate 5s infinite ease;
  animation-delay: 1s;
}

.email-sub-box:hover .main-animation-box-3 {
  animation: box-rotate 5s infinite ease;
  animation-delay: 1.5s;
}

.email-sub-box:hover .main-animation-box-4 {
  animation: box-rotate 5s infinite ease;
  animation-delay: 2s;
}

.email-sub-box:hover .main-animation-box-5 {
  animation: box-rotate 5s infinite ease;
  animation-delay: 2.5s;
}

/* 补全关键帧的首尾状态 */
@keyframes box-rotate {
  0% {
    border: 2px solid #ccc;
    transform: rotateY(0deg);
  }
  10% {
    border: 2px solid orange;
  }
  50% {
    transform: rotateY(720deg);
  }
  100% {
    border: 2px solid #ccc;
    transform: rotateY(0deg);
  }
}

原有HTML代码无需修改即可正常运行，修改后hover容器时方块会按你设置的延迟依次触发旋转动画，同时边框会按顺序变为橙色实现递进效果。

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