Animating non-animatable properties with CSS3 transitions
===

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


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

(with vendor-specific versions, of course). And then

    .s.hidden {
          opacity: 0;
    }

So the animation starts when the `hidden` class is assigned. Problem is, mouse events are still detected on elements with opacity zero, which I don't want, so I need to either set `visibility` to `hidden` or `display` to `none` *after* the transition is finished. I would hope to be able to do something like:

    .s {
          transition-property: opacity, visibility;
          transition-duration: 250ms;
          transition-delay:    0, 250ms;
    }

and then

    .s.hidden {
        opacity: 0;
        visibility: hidden;
    }

to use the CSS transition machinery to do this painlessly. As far as I can tell, that doesn't work because `visibility` is a non-animatable property. But other transition frameworks such as d3 *do* handle non-animatable properties, in the obvious way by simply setting the value when the transition starts, or when it ends.

The best I've been able to come up with is to use the `transitionend` event (and its browser-specific variants such as `oTransitionEnd`) to catch the end of the transition and set `visibility` at that point, but I'm wondering if there's any easier way, preferably sticking purely to CSS. Or, as the title of my question implies, are non-animatable properties just that?