Update 2:

Running the JSFiddle below, in Chrome 31.0.1650.34 beta now does not result in the described behaviour i.e. it does not "freeze as the JavaScript kicks in". I can only assume they have placed the CSS transitions on a separate thread from JavaScript, and the rest of the page—good news! The freezing/blocked transition still does appear in Firefox 25.0.

Update 1:

@IvanCastellanos mentioned that CSS transitions and animations are not blocked on Android Chrome. This is extremely useful information, and partially motivated this question.

Original Question:

This might be more of a question for the browser vendors, but here goes: Until now I was under the impression from this video (and others) that transitioning CSS opacity wouldn't really suffer from any performance issues.

In the video Paul Irish specifically gives the impression that transitioning opacity just isn't going to be a problem and "anyone that tells you otherwise is just ...wrong".

Well, if that's the case, this fiddle makes me wrong.

Why is the CSS transition being blocked by JavaScript, given Paul's extraordinary claims? This is also the case for animations, what's going on?

(For those of you either not seeing what I'm seeing, or too lazy to view the fiddle: I see a red square make it about 1/5 the way through a fade-in transition and then freeze as the JavaScript kicks in, then the squares jump to the end of the transition to full opacity, presumably because the duration has been reached during JavaScript execution.)

Given that stackoverflow is requiring I post some code because I'm linking to jsfiddle, here's the relavant JavaScript and CSS:

(function () {
    "use strict";

    var isVisible = false;

    function handleClick() {

        var fadingSquare = document.querySelector(".fadingSquare"),
            i;

        if (isVisible === false) {
            fadingSquare.className = fadingSquare.className + " active";

            // Do something intensive in JavaScript for a while
            setTimeout(function () {

                for(i = 0; i < 10000; i += 1) {
                    console.log(i);
                }

            }, 200);    // Make it occur midway through the CSS transition

            isVisible = true;
        } else {
            fadingSquare.className = fadingSquare.className.replace("active", "");
            isVisible = false;
        }

    }

    document.addEventListener("click", handleClick, false);
}());

And CSS:

.fadingSquare {
    width: 200px;
    height: 200px;
    background: #F00;
    opacity: 0;
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 1s;
}

.fadingSquare.active {
    opacity: 1;
}

Update 2:

Running the JSFiddle below, in Chrome 31.0.1650.34 beta now does not result in the described behaviour i.e. it does not "freeze as the JavaScript kicks in". I can only assume they have placed the CSS transitions on a separate thread from JavaScript, and the rest of the page—good news! The freezing/blocked transition still does appear in Firefox 25.0.

Update 1:

@IvanCastellanos mentioned that CSS transitions and animations are not blocked on Android Chrome. This is extremely useful information, and partially motivated this question.

Original Question:

This might be more of a question for the browser vendors, but here goes: Until now I was under the impression from this video (and others) that transitioning CSS opacity wouldn't really suffer from any performance issues.

In the video Paul Irish specifically gives the impression that transitioning opacity just isn't going to be a problem and "anyone that tells you otherwise is just ...wrong".

Well, if that's the case, this fiddle makes me wrong.

Why is the CSS transition being blocked by JavaScript, given Paul's extraordinary claims? This is also the case for animations, what's going on?

(For those of you either not seeing what I'm seeing, or too lazy to view the fiddle: I see a red square make it about 1/5 the way through a fade-in transition and then freeze as the JavaScript kicks in, then the squares jump to the end of the transition to full opacity, presumably because the duration has been reached during JavaScript execution.)

Given that stackoverflow is requiring I post some code because I'm linking to jsfiddle, here's the relavant JavaScript and CSS:

(function () {
    "use strict";

    var isVisible = false;

    function handleClick() {

        var fadingSquare = document.querySelector(".fadingSquare"),
            i;

        if (isVisible === false) {
            fadingSquare.className = fadingSquare.className + " active";

            // Do something intensive in JavaScript for a while
            setTimeout(function () {

                for(i = 0; i < 10000; i += 1) {
                    console.log(i);
                }

            }, 200);    // Make it occur midway through the CSS transition

            isVisible = true;
        } else {
            fadingSquare.className = fadingSquare.className.replace("active", "");
            isVisible = false;
        }

    }

    document.addEventListener("click", handleClick, false);
}());

And CSS:

.fadingSquare {
    width: 200px;
    height: 200px;
    background: #F00;
    opacity: 0;
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 1s;
}

.fadingSquare.active {
    opacity: 1;
}

• javascript
• performance
• css

• "Given that stackoverflow is requiring I post some code becuase I'm linking to jsfiddle, here's the relavant JavaScript and CSS" AND it's good practice in any case. – T.J. Crowder Commented Mar 12, 2013 at 17:35
• 1 Then the policy works! – Matt Commented Mar 12, 2013 at 17:37

2 Answers 2

Javascript runs on the browser's UI thread.

The entire page is blocked by Javascript; not just CSS transition.

The selected answer is a bit out of date. As of today on OSX safari, firefox, and chrome all run css animations in separate thread from javascript.