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兼容性。

注意

未加前缀的版本应始终放在带前缀的版本之后。

完整演示

＆＃13;

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

＆＃13;

   <div class="spinner">

        </div>

＆＃13;

Answer 2

对于像Chrome这样的基于webkit的浏览器，您需要@-webkit-keyframes，而对于Mozilla Firefox，您需要@-moz-keyframes

＆＃13;

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

＆＃13;

   <div class="spinner">

        </div>

＆＃13;

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

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

3 个答案: