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

Hi Jonathan,

this is identical to my previous proposal.
There is a need to add and remove animations from the display list through
keyframes.

Animations today are simply motion tweens, not true keyframes.
The addition of 'display: none/block' or some other keyword like 'onstage:
true/false' and a clarification of the current timing model would be enough
to do complex animations.

In one of my previous proposals, I asked for support of pseudo-elements as
well. These are not really necessary but will result in smaller css which is
probably easier to parse and animate by the browser.

Rik Cabanier
Adobe Systems, Inc

On Fri, Jul 29, 2011 at 12:36 PM, Jonathan Snook <jonathan@snook.ca> wrote:

> (apologies if this comes through twice; the messaging on first sending an
> email to the list is a little confusing)
>
> So, I've been trying to reconcile some considerations about CSS3
> Animations. I talked a bit about them recently and explained keyframes like
> we were defining classes that were being applied to the element at certain
> points of time and transitioning values between those times.
>
> However, currently, non-transitionable properties are ignored. I'd like to
> suggest that this be changed and I'll give you a particular use case:
>
>    div {
>        display:block;
>    }
>
>    div.hidden {
>        display:none;
>        animation: slide-out 1s 1;
>    }
>
> In this example, the hidden class is applied to a DIV via JavaScript. The
> problem is that by setting display:none, neither animations nor transitions
> will work. I would propose that non-transitionable values be allowed.
>
> @keyframes slide-out {
>   0% { display:block; opacity: 1; }
>   100% { display:none; opacity:0; }
> }
>
> In this way, the element fades to nothing and then is removed from flow. As
> you can see by this example, the fall back for browsers that don't support
> animations is what we want and still accessible (in the sense that we often
> want things removed from the page for both visual users and screenreader
> users).
>
> On top of this, I would like to recommend an additional property to
> animation-direction: reverse. This would allow a declared animation to be
> run in reverse. For example:
>
> div {
> animation: slide 1s 1;
> }
>
> div.hidden {
> animation-direction: reverse;
> }
>
> This would allow a single animation declaration to be used.
>
> I detailed these things in a post at:
> http://snook.ca/archives/html_and_css/css3-animation-proposal
>
> Thanks for listening to my suggestions.
>
> Jonathan.
>