jquery - Internet Explorer 中的 Css 旋转

Question

我试图通过使用在 chrome 中工作的 css 从 svg 制作旋转齿轮，但是当我在 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 功能。这是我检查某些代码是否在一个浏览器而不是另一个浏览器中工作的第一件事。我用 this website检查浏览器是否支持某项功能。

前缀

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

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