Re: [css3-animations] Effect of display:none and visibility:hidden on animations

On 2/08/2011 7:36 AM, Rik Cabanier wrote:
> Yes, you're absolutely right. I assumed that the default fill-mode was
> 'forwards'.
>
> Are you proposing that the following constructs become valid as well:
> @keyframes fade {
>   10% { display:block; opacity: 1; }
>   90% { display:none; opacity:0; }
> }
> and
> @keyframes fade {
>   10% { display:block; opacity: 1; }
>   30% { display:none; opacity:0; }
>   60% { display:block; opacity: 1; }
>   90% { display:none; opacity:0; }
> }
>
> This would be most helpful, but it seems odd that an element has a running
> animation and a style of 'display: none'.
>
> Rik


Commenting inline would help others to follow this thread.

The problems that others authors are facing with being able to remove an 
element from the flow is an issue that I was facing with my 'Flight of 
the Venturer' [1] demo.

In Safari 5.0.4 ~ 5.0.5, I somewhat managed to remove Neptune and 
replace it with Triton and the remove Triton to replace it again with 
Neptune by transitioning the height (height: 100% to height: 0%) of the 
elements that have Neptune and Triton as background images.

In both Safari 5.1 and Chrome 12, the elements with the backgrounds of 
Neptune and Triton were not working as successfully. Being able to use 
display: none could have solved the issue but I can't see how you can 
animate from display: block to display: none with an animation that last 
longer than 100ms or even in seconds and have it look good. It's not 
like it just vanishes.

In Safari 5.1 (and other recent builds of WebKit) the z-index bug (first 
reported on this list by Boris Zbarsky) has been fixed. Now I (or other 
authors) can transition between layers of z-index to successfully show 
and hide elements along with using opacity. I have now updated my 
'Flight of the Venturer' demo with z-index and layering and this works 
very well in Safari 5.1.

This method of using z-index may solve Jonathan's problem. The pertinent 
CSS in my demo is this (needs fine-tuning).


@-webkit-keyframes pneptune {
	from, 34% { background-position: 72% 50%; z-index: 2; }
	46%  { background-position: 485% 50%; z-index: 1; }
	60%  { background-position: 285% 50%; }
	80%   { background-position: 285% 50%; opacity:0; }
	85%   { background-position: 285% 50%;opacity:0;  }
	86%   { background-position: 285% 50%;opacity:0; }
	to   { background-position: 72% 50%;opacity:1; }
}

@-webkit-keyframes ptriton {
	from { background-position: -370% 50%;opacity:0;z-index: 1; }
	46%  { opacity:0; z-index: 2; }
	46.1%  { opacity:1; z-index: 2; }
	55%  { opacity:1;background-color:black;background-position: 72% 50%; 
z-index: 2; }
	60%  { opacity:1;background-position: 90% 50%; }
	80%  { opacity:0;background-position: 200% 50%; }
	to   { opacity:0; }
}



[1] http://css-3d.org/flight-of-the-venturer.htm
[2] https://bug647494.bugzilla.mozilla.org/attachment.cgi?id=523831
[3] 
http://css-class.com/test/css/3/transforms/transition-painting-and-z-index.htm



-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/

Received on Tuesday, 2 August 2011 06:14:52 UTC