CSS 可见性动画不起作用
我想在 CSS 可见性属性上制作基于关键帧的动画。我最初在“显示”上尝试过，但发现不支持“显示”上的动画，但支持“可见性”。这个想法是让矩形的可见性不断切换。我不想使用 jquery，而是想在 CSS 中实现整个它。以下是我的代码，但它没有给出矩形保持隐藏直到第 5 秒、出现然后在动画结束时再次消失的预期结果
<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>
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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
可见性属性上的 CSS 过渡或动画使元素保持可见
过渡期间，然后突然应用新值。
（假设当前规格并且只要不使用特殊计时功能。）
可见性的过渡/动画不显示逐渐变化的情况
视觉效果，但是当我读到这个问题时，这个想法确实是
让元素隐藏直到第 5 秒。
您的 CSS 动画指定从 0% 到 50% 的第一次过渡
从隐藏变为可见，显示元素
到上面的规则，然后指定从 50% 到
100%从可见到隐藏，同时也显示元素
玩。所以该元素永久可见。
通过指定
元素将保持隐藏状态直到 50%，然后突然出现。
要在最后隐藏它，您需要添加visibility:hidden到
主样式表规则不针对关键帧。
另请参阅我关于 CSS 过渡可见性的博客文章
http://www.taccgl.org/blog/css-transition-visibility .html#Appearance_CSS_Visibility
A CSS transition or animation on the visibility property keeps the element visible
for the duration of the transition and then abruptly applies the new value.
(assuming the current spec and as long as no special timing function is used.)
Transitions/Animations on visibility do not show a gradually changing
visual effect, however as I read the question the idea is indeed
to keep the element hidden till the 5th second.
Your CSS animation specifies a first transition from 0% to 50%
turning from hidden to visible which shows the element according
to the rule above and then you specify a transition from 50% to
100% from visible to hidden, which also shows the element while
playing. So the element it permanently visible.
By specifying
the element will stay hidden until 50% and then abruptly appear.
To hide it at the end, you need to add visibility:hidden to
the main style sheet rule not to the keyframes.
Also see my blog post on CSS transition visibility
http://www.taccgl.org/blog/css-transition-visibility.html#Appearance_CSS_Visibility
可见性（和显示）属性无法设置动画。元素要么可见，要么不可见。尝试使用
opacity属性：Visibility (and display) property can't be animated. An element is either visible or not. Try the
opacityproperty instead: