W3C home > Mailing lists > Public > www-style@w3.org > July 2011

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

From: Jonathan Snook <jonathan@snook.ca>
Date: Fri, 29 Jul 2011 01:22:02 -0400
Message-Id: <43C38778-9A5B-4276-B7FA-15333CBE7865@snook.ca>
To: www-style@w3.org
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 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:42 GMT