大纲CSS动画不适用于Safari

我正试图通过添加一个专用类在我的一些按钮上设置动画。我已经创建了一个动画，它可以在Chrome中使用，但不能在Safari中使用（我使用的是SCSS，所以它会自动为我添加前缀）

当我尝试其他属性（如旋转）时，动画实际上可以工作，但不能使用“轮廓”。我还试图“分离”属性（而不是简写版本），但没有成功

。可比数据{
动画：显示可比数据1s线性无限交替；
}
@关键帧显示可比较的数据{
0% {
大纲：无；
}
65% {
轮廓：1px纯红；
轮廓偏移量：1px；
}
75% {
外形：4倍纯红；
轮廓偏移量：4px；
}
100% {
轮廓：5px纯红；
轮廓偏移量：5px；
}
}

---

Awesome

我可以通过在

可比数据

类中指定一个启动状态来让它工作：

。可比数据{
动画：显示可比数据1s线性无限交替；
外形：2倍纯红；
}
@关键帧显示可比较的数据{
0% {
轮廓：0px实心红色；
轮廓偏移量：0px；
}
65% {
轮廓：1px纯红；
轮廓偏移量：1px；
}
75% {
外形：4倍纯红；
轮廓偏移量：4px；
}
100% {
轮廓：5px纯红；
轮廓偏移量：5px；
}
}

Awesome