Дочерние переходы CSS3 не работают в FireFox

У меня есть элемент h1 и его дочерний элемент, анимированный с помощью переходов CSS3. Все хорошо работает в Chrome и даже в IE 10+, но в Firefox эффекты перехода видны только в родительском элементе, а не в дочернем.

Код такой

<h1>G<span>eneric</span> D<span>ata</span> B<span>inder</span></h1>

Где элемент h1 и элемент span имеют свои собственные переходы как таковые:

h1{
    transition: all 800ms;
    -moz-transition: all 800ms;
    -webkit-transition: all 800ms;
    -ms-transition: all 800ms;
    -o-transition: all 800ms;
    transition-property: line-height,width,font-size;
    -moz-transition-property: line-height,width,font-size;
    -ms-transition-property: line-height,width,font-size;
    white-space: nowrap;
}

h1 span{
    display:inline-block;
    max-width:500px;
    transition: all 800ms;
    -moz-transition: all 800ms;
    -webkit-transition: all 800ms;
    -ms-transition: all 800ms;
    -o-transition: all 800ms;
    transition-property: opacity,max-width;
    -moz-transition-property: opacity,max-width;
    -ms-transition-property: opacity,max-width;
}

Эффект можно увидеть здесь: Универсальный сайт связывания данных

Является ли проблема здесь ошибкой или предостережением в механизме рендеринга FireFox, или я упускаю что-то ключевое, так что я совершаю глупую ошибку?