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 功能。这是我检查某些代码是否在一个浏览器中有效但在另一个浏览器中无效的第一件事。我使用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);
  }
}

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