Почему CSS-анимации и переходы заблокированы JavaScript?

Обновление 2:

Запуск JSFiddle ниже, в Chrome 31.0.1650.34 beta теперь не приводит к описанному поведению, то есть он не "замирает, когда JavaScript запускается". Я могу только предположить, что они поместили переходы CSS в отдельный поток из JavaScript, а остальные страницы - хорошие новости! Замораживание/заблокированный переход по-прежнему появляется в Firefox 25.0.

Обновление 1:

@IvanCastellanos упомянул, что CSS-переходы и анимации не заблокированы на Android Chrome. Это чрезвычайно полезная информация и частично мотивировала этот вопрос.

Оригинальный вопрос:

Это может быть скорее вопросом для поставщиков браузеров, но здесь идет: до сих пор я находился под впечатлением от этого видео (и других), что переход CSS непрозрачность действительно не пострадает от каких-либо проблем с производительностью.

В видео Paul Irish специально создается впечатление, что переходная непрозрачность просто не будет проблемой, и "любой, кто говорит вам иначе, просто... ошибочен".

Хорошо, если это так, эта скрипка меня не в порядке.

Почему переход CSS блокируется JavaScript, учитывая особые требования Paul? Это также относится к анимации, что происходит?

(Для тех из вас, кто не видит то, что я вижу, или слишком ленив, чтобы посмотреть скрипку: я вижу, что красный квадрат делает это примерно на 1/5 пути через переход постепенного перехода, а затем замерзает как JavaScript но квадраты переходят к концу перехода к полной непрозрачности, по-видимому, потому, что продолжительность была достигнута во время выполнения JavaScript.)

Учитывая, что stackoverflow требует, чтобы я размещал некоторый код, потому что я привязываюсь к jsfiddle, здесь релятивный JavaScript и 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);
}());

И CSS:

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

.fadingSquare.active {
    opacity: 1;
}

Ответы

Ответ 1

Javascript запускается в потоке пользовательского интерфейса браузера.

Вся страница заблокирована Javascript; а не только переход CSS.

Ответ 2

Выбранный ответ немного устарел. На сегодняшний день в Safari OSX, firefox и chrome все запущены анимации css в отдельном потоке из javascript.