Safari 中的 CSS3 关键帧中断答案

【问题标题】：CSS3 keyframes breaks in safariSafari 中的 CSS3 关键帧中断
【发布时间】：2023-03-25 07:31:01
【问题描述】：

我有这个用于加载微调器的代码，它适用于所有浏览器，除了 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); }; }

【问题讨论】：

标签： css animation webkit

【解决方案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); } 
}

【讨论】：