Safari 关键帧不起作用答案

【问题标题】：Safari Keyframes not workingSafari 关键帧不起作用
【发布时间】：2023-04-03 08:15:02
【问题描述】：

好的，所以我一直在研究一个图像滑块，它可以在除 safari 之外的所有浏览器上完美运行（在苹果设备和 windows safari 上）我似乎无法弄清楚它为什么不工作。

有人有什么想法吗？

@-webkit-keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

#slider { overflow: hidden; }
#slider figure img { width: 20%; float: left; }
#slider figure { 
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 30s slidy infinite; 
}

【问题讨论】：

你能告诉我们它在 Safari 上究竟做了什么（或没有做这件事），你说“它不能完美地工作”吗？
添加前缀-webkit-animation
感谢修复，它现在完美运行，它是一个简单的纯 css 图像滑块

标签： css safari

【解决方案1】：

Safari 需要前缀 -webkit-animation 属性。

#slider figure { 
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
-webkit-animation: 30s slidy infinite; 
animation: 30s slidy infinite; 
}

http://caniuse.com/#feat=css-animation

【讨论】：

Safari 9（2015 年 9 月发布）不再需要 -webkit- 前缀。根据 CanIUse.com 的数据，Safari 8.x 及更早版本的使用率低于所有浏览器的 1%。