CSS可见性动画不起作用
Posted
技术标签:
【中文标题】CSS可见性动画不起作用【英文标题】：CSS Visibility Animation Not working 【发布时间】：2011-12-13 01:35:16 【问题描述】：我想在可见性 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" >
</canvas>
</body>
</html>
【问题讨论】：
【参考方案1】：可见性（和显示）属性无法设置动画。一个元素要么可见，要么不可见。请改用opacity 属性：
@-moz-keyframes toggle
from
opacity:0;
50%
opacity:1;
to
opacity:0;
【讨论】：
根据w3.org/TR/css3-transitions/#animatable-properties-，可见性是一个动画属性。甚至 Safari 文档也提到可见性可以动画developer.apple.com/library/safari/#documentation/InternetWeb/…。我什至在 2009 年看到了 Mozilla 的 BUG 修复，修复了可见性动画 可见性可以设置动画，对。但不是为了营造视觉效果。您必须将它与“真正的”动画属性一起使用。何时以及如何使用可见性作为动画属性，可以看@greywyvern.com/?post=337【参考方案2】：可见性属性上的 CSS 过渡或动画使元素可见 在过渡期间，然后突然应用新值。 （假设当前规范并且只要没有使用特殊的计时功能。） 可见性的过渡/动画不显示逐渐变化 视觉效果，但是当我读到这个问题时，这个想法确实是 将元素隐藏到第 5 秒。
您的 CSS 动画指定了从 0% 到 50% 的第一个过渡 从隐藏变为可见，显示元素 到上面的规则，然后你指定一个从 50% 到 100% 从可见到隐藏，同时显示元素 玩。所以它永久可见的元素。
通过指定
@keyframes toggle
from
visibility:hidden;
50%
visibility:hidden;
to
visibility:visible;
元素会一直隐藏到 50%，然后突然出现。 要在最后隐藏它，您需要添加可见性：隐藏到 主样式表规则不适用于关键帧。 另请参阅我关于 CSS 过渡可见性的博客文章 http://www.taccgl.org/blog/css-transition-visibility.html#Appearance_CSS_Visibility
【讨论】：
这应该是答案以上是关于CSS可见性动画不起作用的主要内容，如果未能解决你的问题，请参考以下文章