Closed Bug 696582 Opened 13 years ago Closed 13 years ago

CSS Animation on Visibility does not work

Categories

(Core :: CSS Parsing and Computation, defect)

Product:
Core
Component:
CSS Parsing and Computation
Version:
7 Branch
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED INVALID

People

(Reporter: rakssvg, Unassigned)

Details

User Agent: Mozilla/5.0 (Windows NT 5.1) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/14.0.835.202 Safari/535.1

Steps to reproduce:

I tried to have a animation on the 'visibility' property on an element using keyframes. As per document it is supported but it did not work. Following is the CSS code. layer1 is a rect drawn using the Canvas APIs
<html>
   <head>
      <style type="text/css">
           #layer1 {			  
               -moz-animation-duration: 10s;				 
	       -moz-animation-name: toggle;
	       visibility: hidden;
            }

            @-moz-keyframes toggle{
		  0% { visibility: visible; }
		  20%{ visibility: hidden; }
	          30% { visibility: visible; }
		  40%{ visibility: hidden; }
	          50%{ visibility: visible; }
                  100%{ 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>
   </head>		   
   <body>

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



Actual results:

The visibility did not toggle, It remained constantly displayed


Expected results:

The visibility should have toggled as the keyframes rules set at various percetanges of the duration of 10s. As per documentation animation on visibility property is supported but is not working
http://dev.w3.org/csswg/css3-transitions/#animation-of-property-types- says that the 'visibility' property is animated such that all values *between* visible and hidden are visible.  The animation you've written should produce something that is hidden at exactly three instants: the exact 20% point, the exact 40% point, and the end of the animation (which, since the animation doesn't fill, is just a point).  Thus for the entire duration of the animation the element should be visible.
Status: UNCONFIRMED → RESOLVED
Closed: 13 years ago
Component: General → Style System (CSS)
OS: Windows XP → All
Product: Firefox → Core
QA Contact: general → style-system
Hardware: x86 → All
Resolution: --- → INVALID
If that is the case then how do I make an element visible only for 1 frame. 
Say that the browser is capable of animation of 20 frames per second which means that a frame lasts for 50ms.
For a 1 second animation I would want the element to be hidden from 0s to 0.47s, be visible from 0.47s to 0.52s and then again become invisible till 1.0

The only way I could do is to have the following specification by adding a keyframe midway at 50%
    0% { visibility:hidden }
   47% { visibility:hidden }
   50% { visibility:visible }
   52% { visiblity:hidden }
  100% { visibility:hidden }

Now with the browser's capability of 20 frames per second, how could it transition across 47%, 50% and 52% as it ammounts to greater than 20fps
You need to log in before you can comment on or make changes to this bug.