IE10 和 IE11 中不同的 animate.css 动画答案

【问题标题】：Different animate.css animations in IE10 and IE11IE10 和 IE11 中不同的 animate.css 动画
【发布时间】：2017-06-30 08:35:53
【问题描述】：

我正在使用 animate.css 框架为一些社交媒体图标设置动画，但我在 IE10 和 IE11 中获得了不同的动画。是否有特定的前缀或其他技巧来解决该行为？

这是我的 jQuery 代码：

$('li.social-item').hover(
  function(){
    $(this).toggleClass('animated pulse');
});

以下是相应的 CSS 类：

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

我做错了什么？

【问题讨论】：

我做错了什么？ - 你想在不发布小提琴的情况下获得调试帮助
在两个版本中都尝试了您的代码，相同的动画：jsfiddle.net/nydjhLce .... 那么当您尝试时它们有何不同？
@smnbbrv ..我怎样才能发布一个模拟 IE 行为的小提琴？？？
@LGSon ..如果我在 IE 9,10 和 11 中打开动画，我会在奇怪的脉冲动画之后得到一个上滑动画
@Codehan25 如果您无法发布小提琴，那么您将无法获得帮助...

标签： jquery css animation css-animations animate.css

【解决方案1】：

我认为问题出在%transforms。 IE10 AND IE11 的 %transforms 有问题。因此，请尝试将 from/to 与 px 混合。

【讨论】：

不，IE 没有transform 的一般问题，但如果你发现它在这种情况下有问题，我建议你用代码展示它，并提供一个解决方案。