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

On Mon, Aug 1, 2011 at 11:14 PM, Alan Gresley <alan@css-class.com> wrote:

> 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.
>

It should just vanish. There is no 'step' between display: none and block


>
> 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<http://css-3d.org/flight-of-the-venturer.htm>
> [2] https://bug647494.bugzilla.**mozilla.org/attachment.cgi?id=**523831<https://bug647494.bugzilla.mozilla.org/attachment.cgi?id=523831>
> [3] http://css-class.com/test/css/**3/transforms/transition-**
> painting-and-z-index.htm<http://css-class.com/test/css/3/transforms/transition-painting-and-z-index.htm>
>
>
>
>
> --
> Alan Gresley
> http://css-3d.org/
> http://css-class.com/
>