CSS帮助请问我为什么背景动画仅适用于Chrome？它不适用于Firefox或IE。
#animate-area {
width: 100%;
background-position: 0px 0px;
background-repeat: repeat;
-webkit-animation: animatedBackground 10s linear infinite;
-moz-animation: animatedBackground 10s linear infinite;
animation: animatedBackground 10s linear infinite;
}
@-webkit-keyframes animatedBackground {
from { background-position: 0 100%; }
to { background-position: 0 0; }
}
@-moz-keyframes animatedBackground {
from { background-position: 0 100%; }
to { background-position: 0 0; }
}
@keyframes animatedBackground_m {
from { background-position: 0 100%; }
to { background-position: 0 0; }
}
您已经在css中添加了以下代码..检查动画名称，此处_m添加了额外的内容。这就是动画无法在IE和Firefox上运行的原因。
@keyframes animatedBackground_m {
from { background-position: 0 100%; }
to { background-position: 0 0; }
}
在此处检查可用的演示。
#animate-area {
width: 100px;
height:100px;
background:url("http://lorempixel.com/100/100/");
-webkit-animation: animatedBackground 10s linear infinite;
-moz-animation: animatedBackground 10s linear infinite;
animation: animatedBackground 10s linear infinite;
}
@-webkit-keyframes animatedBackground {
from { transform: rotate(0deg);
}
to { transform: rotate(360deg);
}
}
@-moz-keyframes animatedBackground {
from { transform: rotate(0deg);
}
to { transform: rotate(360deg);
}
}
@keyframes animatedBackground {
from { transform: rotate(0deg);
}
to { transform: rotate(360deg);
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句