Html CSS可见性动画不工作_Html_Animation_Css

Html CSS可见性动画不工作

html animation css

Html CSS可见性动画不工作,html,animation,css,Html,Animation,Css,我想在visibility CSS属性上执行基于关键帧的动画。我最初在“显示”上尝试过，但发现“显示”上的动画不受支持，而“可见性”则受支持。其目的是使矩形的可见性保持切换。我不想使用jquery，而是想在CSS中实现整个jquery。下面是我的代码，但它没有给出矩形在第5秒之前保持隐藏的预期结果，在动画结束时出现，然后再次消失 <head> <style type="text/css"> #layer1 {

我想在visibility CSS属性上执行基于关键帧的动画。我最初在“显示”上尝试过，但发现“显示”上的动画不受支持，而“可见性”则受支持。其目的是使矩形的可见性保持切换。我不想使用jquery，而是想在CSS中实现整个jquery。下面是我的代码，但它没有给出矩形在第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>


#第1层{
-moz动画持续时间：10s；
-moz动画名称：切换；
}
@-moz关键帧切换{
从{
可见性：隐藏；
}
50% {
能见度：可见；
}
到{
可见性：隐藏；
}
}
window.onload=函数（）
{
var c=document.getElementById（'layer1'）；
var ctxt=c.getContext（'2d'）；
ctxt.fillStyle='red'；
ctxt.fillRect（0,0200200）；
ctxt.fillStyle='green'；
ctxt.fillRect（0,0100）；
}

  <body>

        <canvas id="layer1" width="200" height="200" >         
   </canvas>

  </body>


</html>

无法设置可见性（和显示）属性的动画。元素是否可见。请改用

不透明度属性：
@-moz-keyframes toggle {
    from {
        opacity:0;
    }

    50% {
        opacity:1;
    }

    to {
        opacity:0;
    }
}

“可见性”属性上的CSS转换或动画使元素保持可见
然后突然应用新值。
（假设当前规范，只要不使用特殊计时功能。）
可见性上的过渡/动画不会显示逐渐变化的效果
视觉效果，然而当我读到这个问题时，这个想法确实
将元素隐藏到第5秒
CSS动画指定从0%到50%的第一次转换
从隐藏变为可见，根据
根据上述规则，然后指定从50%到
100%从可见到隐藏，同时显示元素
玩。因此，元素将永久可见
通过指定
@keyframes toggle {
         from {
            visibility:hidden;
         }
     50% {
            visibility:hidden;
         }
     to {
            visibility:visible;
      }
 }

元素将一直隐藏到50%，然后突然出现。
要在末尾隐藏它，需要添加可见性：隐藏到
主样式表规则不适用于关键帧。
另请参阅我关于CSS转换可见性的博客文章
因为可见性是一个可设置动画的属性。甚至Safari文档也提到可见性可以设置动画。我甚至在2009年看到了Mozilla的一个BUG修复程序，它修复了Visibility上的动画Visibility可以动画化，对吗。但不是为了创造视觉效果。您必须将其与“真实”可设置动画的属性一起使用。何时以及如何使用可见性作为动画属性，您可以看到@这应该是答案