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

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

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>