Jquery internet explorer中的Css旋转

我试图使用css从svg中旋转齿轮，css在chrome中工作，但当我在IE中打开它时，齿轮不旋转，我不知道为什么

<style>
#cogSmall,
#cogBig,
#cogMed {
  animation-name: spin;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin:80px 174px;
  animation-play-state: running;
}
#cogMed {
  animation-duration: 5500ms;
  transform-origin: 225px 174px;
  animation-direction: reverse;
}
#cogSmall {
  animation-duration: 7000ms;
  transform-origin: 170px 70px;
}
@keyframes spin {
  from {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(0deg);
    transform: rotate(360deg);
  }
}
#cogSmall:hover {

}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $('#cogSmall, #cogBig, #cogMed').hover(function(){
            $(this).css("animation-play-state","running")
            }, function(){
            $(this).css("animation-play-state","paused")});
        $('#bigtext').hover(function(){
            $('#cogBig').css("animation-play-state","running")
            }, function(){
            $('#cogBig').css("animation-play-state","paused")});
        $('#medtext').hover(function(){
            $('#cogMed').css("animation-play-state","running")
            }, function(){
            $('#cogMed').css("animation-play-state","paused")});
        $('#smalltext').hover(function(){
            $('#cogSmall').css("animation-play-state","running")
            }, function(){
            $('#cogSmall').css("animation-play-state","paused")});
        });
</script>

#小齿轮，
#科格比格，
#齿轮{
动画名称：旋转；
动画持续时间：4000ms；
动画迭代次数：无限；
动画计时功能：线性；
变换原点：80px 174px；
动画播放状态：运行；
}
#齿轮{
动画持续时间：5500毫秒；
变换原点：225px174px；
动画方向：反向；
}
#小齿轮{
动画持续时间：7000ms；
变换原点：170px 70px；
}
@关键帧旋转{
从{
-moz变换：旋转（0度）；
-o变换：旋转（0度）；
-webkit变换：旋转（0度）；
-ms变换：旋转（0度）；
变换：旋转（0度）；
}
到{
-moz变换：旋转（360度）；
-o变换：旋转（360度）；
-webkit变换：旋转（360度）；
-ms变换：旋转（0度）；
变换：旋转（360度）；
}
}
#小齿轮：悬停{
}
$（文档）.ready（函数（）{
$（'#cogsall，#cogBig，#cogMed'）。悬停（函数（）{
$（this.css（“动画播放状态”，“正在运行”）
}，函数（）{
$（this.css（“动画播放状态”，“暂停”）}）；
$（'#bigtext'）。悬停（函数（）{
$（'#cogBig'）.css（“动画播放状态”，“运行”）
}，函数（）{
$（'#cogBig'）.css（“动画播放状态”，“暂停”）}）；
$（'#medtext'）。悬停（函数（）{
$（'#cogMed'）.css（“动画播放状态”，“正在运行”）
}，函数（）{
$（'#cogMed'）.css（“动画播放状态”，“暂停”）}；
$（'#smalltext'）。悬停（函数（）{
$（'#cogsall'）.css（“动画播放状态”，“正在运行”）
}，函数（）{
$（'#cogsall'）.css（“动画播放状态”，“暂停”）}）；
});

---

当使用chrome时，此代码会旋转齿轮，但不会旋转IE或edge，这一点很重要，非常感谢您的帮助

我认为这是两件事之一：

浏览器支持 如果您使用的是旧版本的浏览器，则可能不支持某些html和css功能。这是我检查某些代码是否在一个浏览器中工作，而不是在另一个浏览器中工作的第一件事。我用于检查浏览器是否支持某个功能

前缀 某些浏览器需要在“@keyframe”中的“keyframe”之前以及动画css属性之前添加前缀。尝试添加以下内容：

@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(0deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes spin {
  from {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(0deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  from {
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(0deg);
    transform: rotate(360deg);
  }
}

---

等等。这些是代码在一个浏览器中工作而不是在另一个浏览器中工作的正常原因。

您可以使用字体很棒的图标轻松做到这一点，如图所示和。不@TotZam我需要它来自自定义svg，您可以看到我的意思，如果您转到cameronrulez.com，我尝试添加它，但它在IE中似乎仍然不起作用，我不明白为什么，我也在使用最新的IE，所以我不确定问题出在哪里。你能发布图片让我试试吗？你可能想看看这个网站：它有一些关于兼容性的好信息。我正在尝试一个兼容版本的IE，它可以在chrome和firefox中工作，所以我不确定为什么它不能工作，它在这里：