Матричный масштабный переход не работает

Question

Я должен использовать матрицу преобразования для анимации преобразования: масштаб элемента.

Я хочу масштабировать от 0 до 1. Если я использую следующий код, он работает правильно:

.container {
    width: 200px;
    height: 100px;
    background: yellow;
    transform: scale(0);
    transition: transform 1s;
}
.container.open {
    transform: scale(1);
}

https://jsfiddle.net/w4kuth78/1/

Если я использую саму матрицу, она не работает.

.container {
    width: 200px;
    height: 100px;
    background: yellow;
    transform: matrix(0, 0, 0, 0, 0, 0);
    transition: transform 1s;
}
.container.open {
    transform: matrix(1, 0, 0, 1, 0, 0);
}

https://jsfiddle.net/m7qpetkh/1/

Я делаю что-то не так или это просто не работает? Мне интересно, потому что это не работает в Chrome и Firefox...

Отладочный вывод console_log сообщает, что при масштабировании от 0 до 1 матрица также устанавливается из матрицы (0,0,0,0,0,0) в матрицу (1,0,0,1,0,0).

РЕДАКТИРОВАТЬ:

Полная путаница... Если я изменю значения scaleX и scaleY в матрице на 0,1 или 0,01, это сработает... вау

Answer 1

При анимации или переходе преобразований списки функций преобразования должны быть интерполированы. Две функции преобразования с одинаковым именем и одинаковым числом аргументов интерполируются численно без предыдущего преобразования. Вычисленное значение будет иметь тот же тип функции преобразования с тем же количеством аргументов.

Специальные правила применяются к rotate3d(), matrix(), matrix3d ​​() и перспективы (). Функции преобразования matrix (), matrix3d ​​() и перспективы () сначала преобразуются в матрицы 4x4 и интерполируются. Если одна из матриц для интерполяции является единственной или необратимой (если ее детерминант равен 0), преобразованный элемент не визуализируется, и используемая функция анимации должна вернуться к дискретной анимации в соответствии с правилами соответствующей спецификации анимации.

Тогда в случае матрицы (0,0,0,0,0,0) очевидно, что матрицы результата 4X4 для масштаба являются единичными

Кредиты для http://www.w3.org/TR/css3-2d-transforms/