Question

<html><head>
<style> 
 .ic-Spin-cycle--circles{
  width: 50px;
  height: 40px;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
  overflow: visible;
  margin: 0px 0px;
}

.ic-Spin-cycle--circles > svg {
  display: inline-block;
  overflow: visible;
  background-color: darkslategray;
  width: 60px;
  height: 40px;
 }

.ic-Spin-cycle--circles > svg > * {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0px, 0px, 0px);
  -ms-transform: translate3d(0px, 0px, 0px);

  -webkit-transform-origin: center;
  transform-origin: center;
  -ms-transform-origin: center;

  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;

  fill: rgba(255, 255, 255, 0.5);

  -webkit-animation-name: circles;
  animation-name: circles;
  -ms-animation-name: circles;

  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -ms-animation-duration: 0.8s;
}



.ic-Spin-cycle--circles > svg > *:nth-of-type(1) {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
  -ms-animation-delay: 0.1s;
}

.ic-Spin-cycle--circles > svg > *:nth-of-type(2) {
   -webkit-animation-delay: 0.2s;
   animation-delay: 0.2s;
   -ms-animation-delay: 0.2s;
}

.ic-Spin-cycle--circles > svg > *:nth-of-type(3) {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
   -ms-animation-delay: 0.3s;
 }

@-webkit-keyframes circles {
   0%   {fill: gray; transform: scale(0.5);}
   100% {fill: red; transform: scale(1.6);}

}

@keyframes circles {
   0%   {fill: gray; transform: scale(0.5);}
   100% {fill: red; transform: scale(1.6);}

}


 </style>
 </head>
 <body>


<div></div>
<div class="ic-Spin-cycle--circles ">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0" y="0" viewBox="0 0 200 79" enable-background="new 0 0 200 79" xml:space="preserve">
            <circle cx="15" cy="39.5" r="3.5"></circle>
            <circle cx="45" cy="39.5" r="3.5"></circle>
            <circle cx="80" cy="39.5" r="3.5"></circle>
          </svg>
        </div>



</body></html>

此代码正在使用firefox和chrome，但它不适用于IE 11或safari

我尝试添加所有特殊的浏览器属性，但仍然没有结果

我还在一个单独的文件中进行了移植，只是复制和过去

简化为：

<html><head>
<style>
    .ic-Spin-cycle--circles{
        width: 50px;
        height: 40px;
        box-sizing: border-box;
        display: inline-block;
        vertical-align: middle;
        overflow: visible;
        margin: 0px 0px;
    }

    .ic-Spin-cycle--circles > svg {
        display: inline-block;
        overflow: visible;
        background-color: darkslategray;
        width: 60px;
        height: 40px;
    }

    .ic-Spin-cycle--circles > svg > circle {
        transform: translate3d(0px, 0px, 0px);
        /*-ms-transform: translate3d(0px, 0px, 0px);*/
        /*-webkit-transform: translate3d(0, 0, 0);*/

        transform-origin: center;
        /*-ms-transform-origin: center;*/
        /*-webkit-transform-origin: center;*/

        animation-iteration-count: infinite;
        /*-ms-animation-iteration-count: infinite;*/
        /*-webkit-animation-iteration-count: infinite;*/

        fill: rgba(255, 255, 255, 0.5);

        animation-name: circles;
        /*-ms-animation-name: circles;*/
        /*-webkit-animation-name: circles;*/

        animation-duration: 0.8s;
        /*-ms-animation-duration: 0.8s;*/
        /*-webkit-animation-duration: 0.8s;*/
    }



    .ic-Spin-cycle--circles > svg > circle:nth-of-type(1) {
        animation-delay: 0.1s;
        /*-ms-animation-delay: 0.1s;*/
        /*-webkit-animation-delay: 0.1s;*/
    }

    .ic-Spin-cycle--circles > svg > circle:nth-of-type(2) {
        animation-delay: 0.2s;
        /*-ms-animation-delay: 0.2s;*/
        /*-webkit-animation-delay: 0.2s;*/
    }

    .ic-Spin-cycle--circles > svg > circle:nth-of-type(3) {
        animation-delay: 0.3s;
        /*-ms-animation-delay: 0.3s;*/
        /*-webkit-animation-delay: 0.3s;*/
    }

    @keyframes circles {
        0%   {fill: gray; transform: scale(0.5);}
        100% {fill: red; transform: scale(1.6);}

    }
    /*@-webkit-keyframes circles {
        0%   {fill: gray; transform: scale(0.5);}
        100% {fill: red; transform: scale(1.6);}

    }*/



</style>
</head>
<body>


    <div></div>
   <div class="ic-Spin-cycle--circles ">
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0" y="0" viewBox="0 0 200 79" enable-background="new 0 0 200 79" xml:space="preserve">
        <circle cx="15" cy="39.5" r="3.5"></circle>
    <circle cx="45" cy="39.5" r="3.5"></circle>
    <circle cx="80" cy="39.5" r="3.5"></circle>
      </svg>
   </div>



   </body></html>

关键帧动画在IE或Safari中不起作用

0 个答案: