Swa*_*aul 4 firefox html5 css3 css-animations webkit-transform
firefox 18.0.1上的css @ -moz-keyframes动画无效,
我在之前的版本上检查了这个动画(忘了版本以前的号码),它正在工作,
这是动画
<html>
<head>
<style type="text/css">
@-webkit-keyframes animation {
0% { -webkit-transform:translate(100px,100px) scale(1); }
50% { -webkit-transform:translate(00px,00px) scale(2); }
100% { -webkit-transform:translate(100px,100px) scale(1); }
}
@-moz-keyframes animation_m {
0% { -moz-transform:translate(100px,100px) scale(1); }
50% { -moz-transform: translate(00px,00px) scale(2); }
100% { -moz-transform:translate(100px,100px) scale(1); }
}
.cc1{
-webkit-animation-name: "animation";
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear;
-moz-animation-name: "animation_m";
-moz-animation-duration: 2s;
-moz-animation-timing-function: linear;
}
#id1,#ci1{
position:absolute;
top:0px;
left:0px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var e=document.getElementById("ci1");
var ctx=e.getContext("2d");
ctx.fillStyle="#f00";
ctx.fillRect(0,0,90,90);
}
</script>
<body>
<div id="id1" class="cc1">
<canvas width="100" height="100" id="ci1" ></canvas>
</div>
</body>
</html>
它是Firefox的bug吗？
Vla*_*lin 12
Firefox 18(以及Opera,IE10和其他许多其他公司在不久的将来)期望W3C属性没有供应商前缀.确保添加以下块:
@keyframes animation_m {
0% { transform:translate(100px,100px) scale(1); }
50% { transform: translate(00px,00px) scale(2); }
100% { transform:translate(100px,100px) scale(1); }
}
.cc1 {
animation-name: animation_m;
animation-duration: 2s;
timing-function: linear;
}
请注意,-moz-transform属性也已更改为transform.
您应始终为所有带前缀的CSS属性包含vendor-prefix-free版本.我还建议为CSS样式和动画名称提供更具描述性的名称.
小智 6
问题出在这一行
-moz-animation-name: "animation_m";
在谷歌浏览器中,如果你用双引号("")编写你的动画名称,它需要作为标识符,但在firefox中它被认为是一个字符串,而不是标识符所以提到没有双引号的动画名称...
-moz-animation-name: animation_m;
| 归档时间： |
|
| 查看次数： |
23503 次 |
| 最近记录： |