Internet Explorer中的CSS旋转

Question

I am attempting to make rotating gears from an svg by using css, which works in chrome, but when I open the it in IE it the gears don't rotate and I'm not sure why.

<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>

This code rotates the gears when on chrome, but not IE or edge, which is important, any help is appreciated

Answer 1

I think it is one of two things:

Browser Support

If you are using an old version of a browser, there is a chance that certain html and css features are not supported. This is one of the first things I check if some code works in one browser but not another. I use this website to check if a browser supports a feature.

Prefixes

Some browsers require a prefix before the "keyframe" in "@keyframe" and before the animation css attribute. Try adding this:

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

etc. These are the normal causes of code working in one browser but not another.