CSS隐现动画不工作 [英] CSS Visibility Animation Not working
问题描述
我想要做的能见度CSS属性基于关键帧动画。我最初尝试了'显示'上，但发现显示不支持，但知名度上的动画。这个想法是使矩形保持反复的知名度。我不想使用jQuery，并希望实现CSS全部。以下是我的code，但它并没有给矩形的预期效果其余隐藏，直到第5秒，出现，然后再在动画的最后消失
＆LT; HEAD＆GT;
＆LT;风格类型=文/ CSS＆GT;
＃{layer1的
-moz-动画持续时间：10秒;
-moz-动画名称：切换;
} @ -moz-关键帧切换{
从{
visibility：hidden的;
} 50％{
能见度：可见;
} 至 {
visibility：hidden的;
}
} ＆LT; /风格＆GT; ＆LT;脚本类型=应用程序/ JavaScript的＆GT;
在window.onload =函数（）
{
变种C =的document.getElementById（'层1'）;
变种ctxt = c.getContext（'2D'）;
ctxt.fillStyle ='红';
ctxt.fillRect（0,0,200,200）;
ctxt.fillStyle =绿色;
ctxt.fillRect（0,0,100,100）;
} ＆LT; / SCRIPT＆GT;
＆LT;身体GT; ＆所述;帆布的id =层1宽度=200HEIGHT =200＆GT;
＆LT; /帆布＆GT; ＆LT; /身体GT;
＆LT; / HTML＆GT;
可见性（和显示）属性不能被动画。一个元件可以是可见或不可见。尝试透明度属性，而不是：
@ - MOZ关键帧切换{
从{
不透明度：0;
} 50％{
不透明度：1;
} 至 {
不透明度：0;
}
}
I want to do a keyframe based animation on the the visibility CSS property. I initially tried it on 'display' but found that animation on 'display' is not supported but 'visibility' is. The idea is to make visibility of rectangle keep toggling. I do not want to use jquery and want to implement whole of it in CSS. Following is my code but it does not give the expected result of the rectangle remaining hidden till the 5th second, appearing and then again disappearing at the end of animation
<head>
<style type="text/css">
#layer1 {
-moz-animation-duration: 10s;
-moz-animation-name: toggle;
}
@-moz-keyframes toggle {
from {
visibility:hidden;
}
50% {
visibility:visible;
}
to {
visibility:hidden;
}
}
</style>
<script type="application/javascript">
window.onload = function()
{
var c = document.getElementById('layer1');
var ctxt = c.getContext('2d');
ctxt.fillStyle = 'red';
ctxt.fillRect(0,0,200,200);
ctxt.fillStyle = 'green';
ctxt.fillRect(0,0,100,100);
}
</script>
<body>
<canvas id="layer1" width="200" height="200" >
</canvas>
</body>
</html>
Visibility (and display) property can't be animated. An element is either visible or not. Try the opacity property instead:
@-moz-keyframes toggle {
from {
opacity:0;
}
50% {
opacity:1;
}
to {
opacity:0;
}
}
这篇关于CSS隐现动画不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
