IE 中的动画变换 CSS 无法按预期工作答案

【问题标题】：Animating transform CSS in IE not working as expectedIE 中的动画变换 CSS 无法按预期工作
【发布时间】：2019-04-09 07:43:40
【问题描述】：

我有一个 CSS 动画，我在我的网站上使用它来动画箭头来回。它在每个浏览器上都可以正常工作，除了 IE，IE 出现了一个奇怪的故障，即箭头的 Y 位置发生了变化，即使它不应该发生变化。

$(function() {
  $('button').click(function(e) {
    e.preventDefault();
    $('img.next').addClass('animated');
  });
});

.arrow-cont {
  height:100%;
  width:130px;
  position:absolute;
  right:0;
  top:0;
  cursor:pointer;
  overflow:hidden;
}
img.next {
  width:30px;
  position:absolute;
  top:50%;
  right:20px;
  animation-duration:1.5s;
  animation-timing-function:ease-in-out;
  transition:0.5s all ease-in-out;
}
  img.next.animated {
    animation-name:next;
    animation-iteration-count:infinite;
  }

@keyframes next {
    from { transform:translate(0px, -50%); }
    65%  { transform:translate(10px, -50%); }
    to   { transform:translate(0px, -50%); }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="arrow-cont">
<img class="next" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/Arrow_Blue_Right_001.svg/768px-Arrow_Blue_Right_001.svg.png" />
</div>


<button>Animate</button>

【问题讨论】：

什么版本的IE？
@TemaniAfif IE11
您可以尝试添加 IE 前缀进行转换。因此，除了您拥有的常规转换代码之外，您还可以按如下方式添加 ms 版本： -ms-transform: translate(0px, -50%);等等，比如这里的例子：w3schools.com/cssref/tryit.asp?filename=trycss3_transform
在我这边无法重现您的问题（使用IE 11.1.17134.0版本），请检查您的IE版本，当您发现箭头的Y位置发生变化时能告诉我们
@Dillion 11.0.9600.19129 Here's a screen capture 显示正在发生的事情

标签： css internet-explorer css-transitions transform

【解决方案1】：

尝试分别设置translateX 和translateY 属性。

另外，我不确定你为什么设置transition:0.5s all ease-in-out，因为没有任何东西被转换。所以我删除了这个。

$(function() {
  $('button').click(function(e) {
    e.preventDefault();
    $('img.next').addClass('animated');
  });
});

.arrow-cont {
  height: 100%;
  width: 130px;
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
  overflow: hidden;
}

img.next {
  width: 30px;
  position: absolute;
  top: 50%;
  right: 20px;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  transform: translateY(-50%) translateX(0px);
}

img.next.animated {
  animation-name: next;
  animation-iteration-count: infinite;
}

@keyframes next {
  from {
    transform: translateY(-50%) translateX(0px);
  }
  65% {
    transform: translateY(-50%) translateX(10px);
  }
  to {
    transform: translateY(-50%) translateX(0px);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="arrow-cont">
  <img class="next" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/Arrow_Blue_Right_001.svg/768px-Arrow_Blue_Right_001.svg.png" />
</div>


<button>Animate</button>

【讨论】：

【解决方案2】：

尝试升级IE 11浏览器版本。因为，我没有找到 IE 11.0.9600.19129 版本的包，我只是在 IE 11.0.9600.19155 和 IE 11.1.17134.0 版本上测试你的代码，它们都运行良好。因此，您可以尝试使用这些版本，或者升级到最新版本。

【讨论】：