Are CSS3 transitions disabled when element is hidden?

Question

I have noticed that (using jQuery in Chrome 43) transitions are disabled when the element has display: none. Is this standarized behavior on all browsers, a feature of jQuery, or is it something that cannot be relied on in production?

The transition is enabled when the CSS statements to be animated are changed in a deferred function. Take a look at this JSFiddle. Uncomment line 3 or 6 to see it for yourself.

---

SOLUTION:

This behavior cannot be relied upon in production as it seems to be a product of optimization/design choices rather than specification (as per @Andriy Horens answer). Instead you should turn on and off the animation (transition-property: none) with a class. Failing to use a class rendered it unreliable for me in Chrome 43. Chrome did also require separate frames (defer the code with a timeout of 0) to update some CSS statements. Just defer anything related to animations if you want to save development time.

Answer 1

According to MDN:

Display

In addition to the many different display box types, the value none lets you turn off the display of an element; when you use none, all descendant elements also have their display turned off. The document is rendered as though the element doesn't exist in the document tree.

So i think elements with display set to none will not be rendered at all across all browsers and therefore transition or any other visual effect won't be applied.

You can also test yourself by subscribing to transitionend event:

$(element).on("transitionend", function () {
     console.log("transition ended");
});

---

Update:

It is also per w3c specification:

And some values (such as display:none, display: contents, and box-suppress: discard) cause the element and/or its descendants to not generate any boxes at all.

Where boxes are visual representations of element. And transition is definitely a part of visual representation as it also can affect layout e.g. when you change relative position of element with transition applied.

---

Here is one more example of how different are animations of elements with display : none and visibility : hidden in other words of rendered element and not-rendered one.

JSFiddle DEMO