Animating non-animatable properties with CSS3 transitions

Question

In my app I\'m animating the opacity of elements on the page with something like:

.s {
    transition-property: opacity;
    transition-duration: 250ms;
}


        

Answer 1

visibility is an animatable property, see the spec.

Which means your .hidden class will work as you have described. Demo here: http://jsfiddle.net/ianlunn/xef3s/

Edit: the spec isn't perfectly clear:

visibility: if one of the values is ‘visible’, interpolated as a discrete step where values of the timing function between 0 and 1 map to ‘visible’ and other values of the timing function (which occur only at the start/end of the transition or as a result of ‘cubic-bezier()’ functions with Y values outside of [0, 1]) map to the closer endpoint; if neither value is ‘visible’ then not interpolable.

But this is what I believe it means:

visibility doesn't smoothly animate between a range of visible and hidden in the way that opacity animates between 1 - 0. It simply switches between visible and hidden at the start and end states of the transition.

Providing the transition is either going to or from visibility, then a transition will occur. If trying to transition between visibility: hidden and visibility: collapse for example, those values are "not interpolable" and the transition would not occur.

So in my example, opacity causes the element to fade out and then at the end of the transition, visibility snaps to hidden.

Answer 2

As a good alternative to display/visibility toggle, opacity:0 with pointer-events:none could be used.