CSS可见性动画不起作用答案

【问题标题】：CSS Visibility Animation Not workingCSS可见性动画不起作用
【发布时间】：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" width="200" height="200" >         
   </canvas>

  </body>


</html>

【问题讨论】：

标签： html animation css

【解决方案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

【讨论】：

这应该是答案