Html 关键帧动画在IE或safari中不起作用 .ic自旋循环——圈{ 宽度：50px；高度：40px；框大小：边框框；显示：内联块；垂直对齐：中间对齐；溢出：可见；保证金：0px 0px； } .ic旋转循环--圆圈>svg{ 显示：内联块；溢出：可见；背景色：深灰色；宽度：60px；高度：40px； } .ic旋转循环--圆圈>svg>*{ -webkit转换：translate3d（0,0,0）；转换：translate3d（0px，0px，0px）； -ms变换：translate3d（0px，0px，0px）； -webkit变换原点：中心；变换原点：中心； -ms变换原点：中心； -webkit动画迭代计数：无限；动画迭代次数：无限； -ms动画迭代次数：无限；填充：rgba（255、255、255、0.5）； -webkit动画名称：圆圈；动画名称：圆； -ms动画名称：圆圈； -webkit动画持续时间：0.8s；动画持续时间：0.8s； -ms动画持续时间：0.8s； } .ic旋转循环--圆圈>svg>*：第n个类型（1）{ -webkit动画延迟：0.1s；动画延迟：0.1s； -ms动画延迟：0.1s； } .ic旋转循环--圆圈>svg>*：第n个类型（2）{ -webkit动画延迟：0.2s；动画延迟：0.2s； -ms动画延迟：0.2s； } .ic旋转循环--圆圈>svg>*：第n个类型（3）{ -webkit动画延迟：0.3s；动画延迟：0.3s； -ms动画延迟：0.3s； } @-webkit关键帧圆{ 0%{填充：灰色；变换：比例（0.5）；} 100%{填充：红色；变换：比例（1.6）；} } @关键帧圆{ 0%{填充：灰色；变换：比例（0.5）；} 100%{填充：红色；变换：比例（1.6）；} }_Html_Css_Internet Explorer_Animation_Keyframe

Html 关键帧动画在IE或safari中不起作用 .ic自旋循环——圈{ 宽度：50px；高度：40px；框大小：边框框；显示：内联块；垂直对齐：中间对齐；溢出：可见；保证金：0px 0px； } .ic旋转循环--圆圈>svg{ 显示：内联块；溢出：可见；背景色：深灰色；宽度：60px；高度：40px； } .ic旋转循环--圆圈>svg>*{ -webkit转换：translate3d（0,0,0）；转换：translate3d（0px，0px，0px）； -ms变换：translate3d（0px，0px，0px）； -webkit变换原点：中心；变换原点：中心； -ms变换原点：中心； -webkit动画迭代计数：无限；动画迭代次数：无限； -ms动画迭代次数：无限；填充：rgba（255、255、255、0.5）； -webkit动画名称：圆圈；动画名称：圆； -ms动画名称：圆圈； -webkit动画持续时间：0.8s；动画持续时间：0.8s； -ms动画持续时间：0.8s； } .ic旋转循环--圆圈>svg>*：第n个类型（1）{ -webkit动画延迟：0.1s；动画延迟：0.1s； -ms动画延迟：0.1s； } .ic旋转循环--圆圈>svg>*：第n个类型（2）{ -webkit动画延迟：0.2s；动画延迟：0.2s； -ms动画延迟：0.2s； } .ic旋转循环--圆圈>svg>*：第n个类型（3）{ -webkit动画延迟：0.3s；动画延迟：0.3s； -ms动画延迟：0.3s； } @-webkit关键帧圆{ 0%{填充：灰色；变换：比例（0.5）；} 100%{填充：红色；变换：比例（1.6）；} } @关键帧圆{ 0%{填充：灰色；变换：比例（0.5）；} 100%{填充：红色；变换：比例（1.6）；} }

html css internet-explorer animation

Html 关键帧动画在IE或safari中不起作用 .ic自旋循环——圈{ 宽度：50px；高度：40px；框大小：边框框；显示：内联块；垂直对齐：中间对齐；溢出：可见；保证金：0px 0px； } .ic旋转循环--圆圈>svg{ 显示：内联块；溢出：可见；背景色：深灰色；宽度：60px；高度：40px； } .ic旋转循环--圆圈>svg>*{ -webkit转换：translate3d（0,0,0）；转换：translate3d（0px，0px，0px）； -ms变换：translate3d（0px，0px，0px）； -webkit变换原点：中心；变换原点：中心； -ms变换原点：中心； -webkit动画迭代计数：无限；动画迭代次数：无限； -ms动画迭代次数：无限；填充：rgba（255、255、255、0.5）； -webkit动画名称：圆圈；动画名称：圆； -ms动画名称：圆圈； -webkit动画持续时间：0.8s；动画持续时间：0.8s； -ms动画持续时间：0.8s； } .ic旋转循环--圆圈>svg>*：第n个类型（1）{ -webkit动画延迟：0.1s；动画延迟：0.1s； -ms动画延迟：0.1s； } .ic旋转循环--圆圈>svg>*：第n个类型（2）{ -webkit动画延迟：0.2s；动画延迟：0.2s； -ms动画延迟：0.2s； } .ic旋转循环--圆圈>svg>*：第n个类型（3）{ -webkit动画延迟：0.3s；动画延迟：0.3s； -ms动画延迟：0.3s； } @-webkit关键帧圆{ 0%{填充：灰色；变换：比例（0.5）；} 100%{填充：红色；变换：比例（1.6）；} } @关键帧圆{ 0%{填充：灰色；变换：比例（0.5）；} 100%{填充：红色；变换：比例（1.6）；} },html,css,internet-explorer,animation,keyframe,Html,Css,Internet Explorer,Animation,Keyframe,这段代码适用于firefox和chrome，但不适用于IE 11或safari 我试图添加所有特殊的浏览器属性，但仍然没有结果为了便于携带，我还把它放在一个单独的文件中，只是复制和过去简化： <html><head> <style> .ic-Spin-cycle--circles{ width: 50px; height: 40px; box-sizing: border-box; display: inline-block; ve

这段代码适用于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 > * {
  -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>


.ic自旋循环——圈{
宽度：50px；
高度：40px；
框大小：边框框；
显示：内联块；
垂直对齐：中间对齐；
溢出：可见；
保证金：0px 0px；
}
.ic旋转循环--圆圈>svg{
显示：内联块；
溢出：可见；
背景色：深灰色；
宽度：60px；
高度：40px；
}
.ic旋转循环--圆>svg>圆{
转换：translate3d（0px，0px，0px）；
/*-ms变换：translate3d（0px，0px，0px）*/
/*-webkit转换：translate3d（0,0,0）*/
变换原点：中心；
/*-ms变换原点：中心*/
/*-webkit变换原点：中心*/
动画迭代次数：无限；
/*-ms动画迭代次数：无限*/
/*-webkit动画迭代计数：无限*/
填充：rgba（255、255、255、0.5）；
动画名称：圆；
/*-ms动画名称：圆圈*/
/*-webkit动画名称：圆圈*/
动画持续时间：0.8s；
/*-ms动画持续时间：0.8s*/
/*-webkit动画持续时间：0.8s*/
}
.ic旋转循环--圆>svg>圆：第n个类型（1）{
动画延迟：0.1s；
/*-ms动画延迟：0.1s*/
/*-webkit动画延迟：0.1s*/
}
.ic旋转循环--圆>svg>圆：第n个类型（2）{
动画延迟：0.2s；
/*-ms动画延迟：0.2s*/
/*-webkit动画延迟：0.2s*/
}
.ic旋转循环--圆>svg>圆：第n个类型（3）{
动画延迟：0.3s；
/*-ms动画延迟：0.3s*/
/*-webkit动画延迟：0.3s*/
}
@关键帧圆{
0%{填充：灰色；变换：比例（0.5）；}
100%{填充：红色；变换：比例（1.6）；}
}
/*@-webkit关键帧圆{
0%{填充：灰色；变换：比例（0.5）；}
100%{填充：红色；变换：比例（1.6）；}
}*/

尝试通过验证器运行CSS…您有两个未关闭的块。修复了缺少的括号，但仍然没有发生任何事情，我还使它更简单

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