嘿伙计们,我目前正在使用css3关键帧构建一个图像显示(小),它正在工作,但仅在某些方面在Firefox上,我似乎无法解决问题:(它应该在最新版本的工作chrome firefox和safari,但它目前只在firefox中工作。
任何人都可以提供帮助吗?
以下是适用于浏览器的css。
@keyframes cf4FadeInOut {
0% {
opacity:1;
}
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
.case-image {
position:relative;
height:auto;
width:32%;
}
.case-image img {
position:absolute;
width: 100%;
height: auto;
left:0;
border: 3px solid #f8d206;
-moz-border-radius: 15px;
border-radius: 15px;
margin-left: -3px;
margin-right: -3px;
}
.case-image img {
-webkit-animation-name: cf4FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 8s;
-moz-animation-name: cf4FadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 8s;
-o-animation-name: cf4FadeInOut;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 8s;
animation-name: cf4FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 8s;
}
.case-image img:nth-of-type(1) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
animation-delay: 6s;
}
.case-image img:nth-of-type(2) {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
.case-image img:nth-of-type(3) {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
}
.case-image img:nth-of-type(4) {
-webkit-animation-delay: 0;
-moz-animation-delay: 0;
-o-animation-delay: 0;
animation-delay: 0;
}
答案 0 :(得分:2)
您需要包含关键帧的供应商前缀。请参阅此处以获取示例:http://jsfiddle.net/tjfogarty/Gzxkq/
@keyframes pulse {
0% { width: 40px; height: 40px; }
100% { width: 50px; height: 50px; }
}
@-webkit-keyframes pulse {
0% { width: 40px; height: 40px; }
100% { width: 50px; height: 50px; }
}
@-moz-keyframes pulse {
0% { width: 40px; height: 40px; }
100% { width: 50px; height: 50px; }
}
等...
你也可以使用这样的东西:http://leaverou.github.com/prefixfree/为你照顾它。