Snake loader css 动画关键帧不工作

Question

我正在尝试使用关键帧动画 css 制作蛇形加载器微调器，但我不知道它行不通有人可以帮忙吗？这里是 fiddle： 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

对于像 chrome 这样基于 webkit 的浏览器，您需要 @-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 2

我改变了你的fiddle。这是工作动画：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;
}

Answer 3

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

fiddle demo

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

为了与 Firefox 兼容，这需要加上 -moz- 前缀。

备注

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

完整演示

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

Snake loader css 动画关键帧不工作

Snake loader css animation keyframes doesn't work

css

animation

spinner

keyframe