CSS @ -moz-keyframes动画无法在Firefox 18.0.1上运行
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错误吗？
问题答案：
Firefox18（以及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属性，您应 始终包括无供应商前缀的版本。我还建议给您的CSS样式和动画名称更多描述性的名称。
-
我有一些@keyframes动画和相关的CSS类名。例如，类似于： 如果我显示多个应用了.fade类的元素，有没有办法将它们锁定在一起，使它们在动画关键帧中共享相同的位置？ 例如，如果我从一个开始，并且碰巧在第一个在动画中达到50%时添加了第二个，那么我希望第二个从50%开始，这样所有内容都会一起淡入淡出。
-
问题内容： 我正在尝试使用CSS和SVG创建简单的动画：旋转齿轮。该动画可以在Chrome浏览器中完美运行，但不能在Firefox中运行。这是运行中的代码： 齿轮是SVG文件中的路径： 然后使用CSS来应用动画： 使用CSS是首选方法，因为我正在动态应用该类。（向下滚动时为逆时针方向，向上滚动时为顺时针方向），但是出于这个问题的目的，我只应用一个类。Chrome可以很好地实现它，但是Firefox
-
问题内容： 我有一个div的CSS动画，经过一定时间后会滑入。我想要几个div填充滑入的动画div的空间，然后它将这些元素向下推到页面上。 当我在第一个div尝试此操作时，即使看不见，幻灯片仍会占用空间。如果我将div更改为div，则根本不会滑入。 我如何让div在不定时的情况下不占用空间（使用CSS进行计时）。 我正在为动画使用Animate.css。 代码如下所示： 如代码所示，我希望隐藏主d
-
问题内容： 我想通过CSS旋转加载图标。 我有一个图标和以下代码： 但这是行不通的。如何使用CSS旋转图标？ 问题答案：
-
主要内容：@keyframes 规则,animation-name,animation-duration,animation-timing-function,animation-fill-mode,animation-delay,animation-iteration-count,animation-direction,animation-play-state,animation通过《 CSS过渡》一节的学习我们知道，利用 transition 属性可以实现简单的过渡动画，但过渡动画仅能指定开始
-
CSS 动画可以在不借助 Javascript 的情况下做出一些简单的动画效果。 你也可以通过 Javascript 控制 CSS 动画，使用少量的代码，就能让动画表现更加出色。 CSS 过渡（transition）[#css-transition] CSS 过渡的理念非常简单，我们只需要定义某一个属性以及如何动态地表现其变化。当属性变化时，浏览器将会绘制出相应的过渡动画。 也就是说：我们只需要改