Internet Explorer中的CSS旋转

Question

我正在尝试使用css在svg中制作旋转齿轮，该工具在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>

此代码在chrome上旋转齿轮，但在IE或edge上不旋转，这很重要，不胜感激

Answer 1

我认为这是两件事之一：

浏览器支持

如果使用的是旧版浏览器，则可能不支持某些html和css功能。 这是我检查某些代码是否在一种浏览器中有效但在另一种浏览器中无效的第一件事。 我使用该网站检查浏览器是否支持该功能。

前缀

某些浏览器在“ @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);
  }
}

这些是导致代码在一种浏览器中正常工作的原因，而不是在另一种浏览器中正常工作的原因。