CSS3 关键帧在 safari 中中断

Question

我有这个加载微调器的代码，它适用于所有浏览器，除了 safari，它破坏了整个网站，我已经将它缩小到下面的 webkit 特定代码的问题，但无法弄清楚为什么它刹车，任何想法:

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

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

Answer 1

您在代码中的 100% 定义后有不必要的分号。显然 Safari 会因为它而窒息，而其他人则忽略它。

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

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