Verschiedene animate.css Animationen in IE10 und IE11

Question

Ich benutze das animate.css-Framework, um einige Social-Media-Icons zu animieren, aber ich bekomme verschiedene Animationen in IE10 und IE11. Gibt es ein bestimmtes Präfix oder einen anderen Trick, um dieses Verhalten zu beheben?

Hier ist meine jQuery-Code:

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

Hier werden die entsprechenden CSS-Klassen:

.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); 
    } 
} 

Was mache ich falsch?

Answer 1

Ich denke, das Problem ist mit %transforms. IE10 UND IE11 hat ein Problem mit% Transformationen. Versuchen Sie also, von/nach mit px zu mischen.