title: CSS Visibility Animation Not working
body: <p>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</p>
  
  <pre><code>  &lt;head&gt;
        &lt;style type="text/css"&gt;
       #layer1 {            
                  -moz-animation-duration: 10s;                
          -moz-animation-name: toggle;
       }
  
       @-moz-keyframes toggle {
               from {
                  visibility:hidden;
               }
  
           50% {
                      visibility:visible;
               }
  
           to {
           visibility:hidden;
            }
     }
  
    &lt;/style&gt;
  
    &lt;script type="application/javascript"&gt;
        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);
        }
  
    &lt;/script&gt;
  </code></pre>
  
  <p>         </p>
  
  <pre><code>  &lt;body&gt;
  
          &lt;canvas id="layer1" width="200" height="200" &gt;         
     &lt;/canvas&gt;
  
    &lt;/body&gt;
  
  
  &lt;/html&gt;
  </code></pre>