Snake loader css动画关键帧不起作用

Question

我正在尝试使用关键帧动画制作带有 css 的蛇形加载器微调器，但我不知道它不起作用 有人可以帮忙吗？ 这里的小提琴： https://jsfiddle.net/fs6kafsn/

@keyframes rotate {
    0%    { transform: rotate(0deg); }
    100%  { transform: rotate(360deg); }
}

.spinner {
     display: block;
     margin: 50px;
     height: 28px;
     width: 28px;
     animation: rotate 0.8s infinitelinear!important;
     -webkit-animation: rotate 0.8s infinitelinear!important;
     border: 8px solid red;
     border-right-color: transparent;
     border-radius: 50%;
     position:relative;
}

提前致谢

Answer 1

您还需要为关键帧添加前缀。

fiddle demo

@-webkit-keyframes rotate {
    0%    { transform: rotate(0deg); }
    100%  { transform: rotate(360deg); }
}
@keyframes rotate {
    0%    { transform: rotate(0deg); }
    100%  { transform: rotate(360deg); }
}

这也需要以 -moz- 为前缀，以便与 firefox 兼容。

注意

无前缀版本应始终放在有前缀版本之后。

完整演示

.spinner {
    display: block;
    margin: 50px;
    height: 28px;
    width: 28px;    
    -webkit-animation: rotate 0.8s infinite linear !important;
    -moz-animation: rotate 0.8s infinite linear !important;
    animation: rotate 0.8s infinite linear !important;
    border: 8px solid red;
    border-right-color: transparent;
    border-radius: 50%;
    position:relative;
}
@-webkit-keyframes rotate {
    0%    { transform: rotate(0deg); }
    100%  { transform: rotate(360deg); }
}
@-moz-keyframes rotate {
    0%    { transform: rotate(0deg); }
    100%  { transform: rotate(360deg); }
}
@keyframes rotate {
    0%    { transform: rotate(0deg); }
    100%  { transform: rotate(360deg); }
}

   <div class="spinner">

        </div>

Answer 2

对于基于 webkit 的浏览器，例如 chrome，您需要 @-webkit-keyframes，对于 Mozilla firefox，您需要 @-moz-keyframes

@keyframes spin {
    0%    { transform: rotate(0deg); }
    100%  { transform: rotate(360deg); }
}

@-webkit-keyframes spin {
    0%    { transform: rotate(0deg); }
    100%  { transform: rotate(360deg); }
}


@-moz-keyframes spin {
    0%    { transform: rotate(0deg); }
    100%  { transform: rotate(360deg); }
}

.spinner {
    display: block;
    margin: 50px;
    height: 28px;
    width: 28px;
    animation: spin 0.8s infinite linear!important;
    -webkit-animation: spin 0.8s infinite linear!important;
    border: 8px solid red;
    border-right-color: transparent;
    border-radius: 50%;
    position:relative;
}

   <div class="spinner">

        </div>

Answer 3

我改变了你的小提琴。这是工作动画：fiddle:

---

代码：

@-moz-keyframes myanimation /* Firefox */
{
    0%   {transform: rotate(0deg);}
    100%   {transform: rotate(360deg);}
}

@-webkit-keyframes myanimation /* Safari and Chrome */
{
    0%   {transform: rotate(0deg);}
    100%   {transform: rotate(360deg);}
}

.spinner {
    display: block;
    margin: 50px;
    height: 28px;
    width: 28px;
    animation:myfirst 5s;
    -moz-animation:myanimation 0.8s infinite linear; /* Firefox */
    -webkit-animation:myanimation 0.8s infinite linear; /* Safari and Chrome */
    border: 8px solid red;
    border-right-color: transparent;
    border-radius: 50%;
    position:relative;
}