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

时间:2017-02-12 08:51:49

标签: jquery css3 animation css-animations animate.css

我使用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);
  }
}

我做错了什么?

1 个答案:

答案 0 :(得分:0)

我认为问题出在%transforms上。 IE10和IE11有%变换的问题。因此,尝试使用px进行混合。