IE10/IE11中CSS keyframe的translate3d动画不可见问题求助

嘿，这个IE10的兼容坑我之前踩过！它对CSS动画和transform的处理真是有自己的小脾气，咱们来一步步解决这个问题：

核心问题：缺少IE10专属的-ms-前缀 #

IE10不识别无前缀的@keyframes和transform属性，你的现有代码只加了moz、webkit、o的前缀，完全漏掉了-ms-的，这就是动画只跳帧不移动的关键原因。

解决方案1：补全所有前缀（包括-ms-） #

你需要给@keyframes和每个关键帧里的transform都加上-ms-前缀，还要单独写一个IE10专属的@-ms-keyframes（虽然有些情况下合并写也能生效，但单独写更稳妥）。修改后的代码示例如下：

/* 标准无前缀版本 */
@keyframes moveRightToLeft {
  0% {
    transform: rotateZ(0deg) translate3d(0%, 0, 0);
    -moz-transform: rotateZ(0deg) translate3d(0%, 0, 0);
    -webkit-transform: rotateZ(0deg) translate3d(0%, 0, 0);
    -o-transform: rotateZ(0deg) translate3d(0%, 0, 0);
    -ms-transform: rotateZ(0deg) translate3d(0%, 0, 0);
  }
  /* 假设50%时移动到左侧，你可以根据自己的需求调整关键帧 */
  50% {
    transform: rotateZ(0deg) translate3d(-100%, 0, 0);
    -moz-transform: rotateZ(0deg) translate3d(-100%, 0, 0);
    -webkit-transform: rotateZ(0deg) translate3d(-100%, 0, 0);
    -o-transform: rotateZ(0deg) translate3d(-100%, 0, 0);
    -ms-transform: rotateZ(0deg) translate3d(-100%, 0, 0);
  }
  100% {
    transform: rotateZ(180deg) translate3d(0%, 0, 0);
    -moz-transform: rotateZ(180deg) translate3d(0%, 0, 0);
    -webkit-transform: rotateZ(180deg) translate3d(0%, 0, 0);
    -o-transform: rotateZ(180deg) translate3d(0%, 0, 0);
    -ms-transform: rotateZ(180deg) translate3d(0%, 0, 0);
  }
}

/* IE10专属的keyframes前缀版本 */
@-ms-keyframes moveRightToLeft {
  0% {
    -ms-transform: rotateZ(0deg) translate3d(0%, 0, 0);
  }
  50% {
    -ms-transform: rotateZ(0deg) translate3d(-100%, 0, 0);
  }
  100% {
    -ms-transform: rotateZ(180deg) translate3d(0%, 0, 0);
  }
}

同时，给应用动画的元素也要加上-ms-前缀：

.your-arrow-class {
  animation: moveRightToLeft 4s infinite;
  -moz-animation: moveRightToLeft 4s infinite;
  -webkit-animation: moveRightToLeft 4s infinite;
  -o-animation: moveRightToLeft 4s infinite;
  -ms-animation: moveRightToLeft 4s infinite;
}

解决方案2：用translateX替代translate3d（备选） #

虽然IE10理论上支持translate3d，但在动画场景下偶尔会出现渲染异常，换成2D的translateX有时候能规避这个问题。比如把translate3d(-100%, 0, 0)改成translateX(-100%)，同样记得加上-ms-前缀。

这样修改后，IE10应该就能正常显示箭头的移动动画了，不会再只跳两端啦！

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