IE11中CSS Transform动画失效问题求助

Ah, this is a classic IE11 CSS animation gotcha! I’ve run into this exact issue before—let’s break down how to get that translateY animation working alongside your opacity fade:

1. 添加IE11专属的-ms-前缀关键帧和动画声明 #

IE11对标准CSS动画的支持有不少 quirks，其中最关键的一点是它需要明确的带-ms-前缀的关键帧和动画属性。更新你的代码，同时保留标准语法和IE专属版本：

/* 现代浏览器（Firefox、Chrome等）的标准关键帧 */
@keyframes pulse {
  0% {
    opacity: 1.0;
    transform: translateY(+5px);
  }
  45% {
    opacity: .20;
    transform: translateY(-5px);
  }
  100% {
    opacity: 1.0;
    transform: translateY(+5px);
  }
}

/* IE11专属的带-ms-前缀关键帧 */
@-ms-keyframes pulse {
  0% {
    opacity: 1.0;
    -ms-transform: translateY(+5px);
  }
  45% {
    opacity: .20;
    -ms-transform: translateY(-5px);
  }
  100% {
    opacity: 1.0;
    -ms-transform: translateY(+5px);
  }
}

#blink_layer {
  /* 标准动画声明 */
  animation: pulse 2s infinite;
  /* IE11专属动画声明 */
  -ms-animation: pulse 2s infinite;
  
  /* 核心：确保元素支持transform */
  display: inline-block; /* 或block，根据你的布局调整 */
  
  /* 设置初始transform状态，匹配动画起始帧 */
  transform: translateY(+5px);
  -ms-transform: translateY(+5px);
}

2. 确保元素是块级/行内块级元素 #

IE11 不支持对inline元素应用transform。如果#blink_layer默认是display: inline，必须改成inline-block或block，否则平移动画永远不会生效。

3. 明确设置初始transform状态 #

IE11的动画引擎通常需要一个清晰的起始transform值，才能识别出动画中的属性变化。通过让元素初始transform状态和动画0%帧保持一致，你给了IE11足够的上下文来正确触发动画。

把这些步骤结合起来，就能让IE11中的透明度渐变和Y轴平移动画同时正常工作，同时Firefox等现代浏览器也能继续使用标准语法正常运行。

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