[英]Safari Keyframes not working
Ok, so I've been working on an image slider which works perfect on all browsers except safari (on apple device and on windows safari) I can't seem to work out why its not working. 好的,所以我一直在研究一种图像滑块,该滑块在safari除外(在Apple设备和Windows safari上)之外的所有浏览器上都可以正常使用,我似乎无法弄清为什么它不起作用。
Anybody got any ideas? 有人有想法吗?
@-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 requires the prefixed -webkit-animation
property. 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 http://caniuse.com/#feat=css-animation
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.