我使用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);
}
}
我做错了什么?
答案 0 :(得分:0)
我认为问题出在%transforms
上。 IE10和IE11有%变换的问题。因此,尝试使用px进行混合。