我正在开发一个新的网站,但是当我的朋友在Firefox上测试它时,其中一个功能无效。
我们发现css不能在firefox中运行,但它确实可以在Chrome中运行。
整个代码:https://jsfiddle.net/wvkL6d2b/
我们试过-webkit-和-ms-
#separator{ width: 10px!important; max-width: 60px!important; height: 10px; background:red;}
@keyframes in-out {
from { width: 10px;
}
10%, 100% {
width: 60px;
}
to{ width: 60px; }
}
#separator {
animation-name: in-out;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-delay: 2s;
}
我试图让它在两个浏览器上工作
您编写的CSS属性中存在很多错误。请在fiddle找到更新的代码。这些应该是要使用的属性。
#separator {
height: 10px;
background: red;
-webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
animation: mymove 5s infinite;
}
@-webkit-keyframes mymove {
0% { width: 10px; }
100% { width: 100px; }
}
/* Standard syntax */
@keyframes mymove {
0% { width: 10px; }
100% { width: 100px; }
}
它没有用,因为你声明了错误的属性。
firefox所需的声明只是动画。只有Chrome和Safari需要-webkit-前缀才能获得此CSS3效果。
所以你的代码是:
-webkit-animation:slideshow 21s infinite;
animation:slideshow 21s infinite;