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

On Tue, Aug 2, 2011 at 5:25 PM, Dean Jackson <dino@apple.com> wrote:

>
> On 02/08/2011, at 4:56 PM, Alan Gresley wrote:
>
> > On 3/08/2011 3:00 AM, Rik Cabanier wrote:
> >> On Mon, Aug 1, 2011 at 11:14 PM, Alan Gresley wrote:
> >
> >>> 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
> >
> >
> > What happens if the animation between display: block and display: none is
> 4 seconds long.
> >
> >
> > @keyframes four-seconds-long-animation {
> >       from { display: block }
> >       to   { display: none }
> > }
> >
> >
> > In what fashion does it vanish over a 4 second time period? What should
> happen if a UAs is faced with such an animation?
>
> You can think of an animation as a function that takes time as an input and
> produces a percentage as output. That percentage determines the state of the
> element (in this case the style, or the value of a property), usually by
> calculating what it means as a change from the starting state to the ending
> state. In come cases, such as numbers, this is easy. In other cases, such as
> where there is not a smooth path between the states, you have to describe
> what that percentage means. The 'display' property is a good example.
>
> The spec could say that percentages < 100 for non-continuous properties are
> the starting state. So in the example above, the animation would be 'block'
> for four seconds up to the last frame where it would immediately change to
> 'none'. As an author you can control the percentage by using the timing
> function. If you wanted the value 'block' value to change at the start of
> the animation, you could use the 'step-start' value.
>

It seems that non-contiguous properties could act like a toggle.
Otherwise, you might have to do silly things like:

@keyframes four-seconds-long-animation {
      from { display: block }
      49.99% { display: block }
      50%{ display: none }
      to { display: none }
}


>
> There is another alternative which may be too hard to specify, which is
> that UAs might crossfade the rendering of the begin and end states. The
> problem is when you want other things to animate at the same time.
>
> Dean
>
>