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

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.

Thanks for listening to my suggestions.

Jonathan.

Received on Saturday, 30 July 2011 05:55:29 UTC