CSS преобразование: масштаб (0,001) работает, но масштаб (0,0) не работает

Question

Я делаю сайт, и у меня есть формы, которые делают CSS переходы. На переходе, над которым я сейчас работаю, происходит нечто странное. Если я добавлю transform: scale (0.001), переход будет работать так, как задумано, в течение одной секунды, но если я добавлю scale (0.0), элемент просто исчезнет без анимации. Протестировано в Chrome кстати.

Почему это происходит? Почему не работает масштабирование (0.0)? Спасибо за помощь.

Соответствующий CSS класс ниже

.blue.centred {  
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1.0s, 1.0s;
    -webkit-transition-delay: 0.0s, 0.0s;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-property: -webkit-transform;
    -moz-transition-duration: 1.0s , 1.0s;
    -moz-transition-delay: 0.0s, 0.0s;
    -moz-transition-timing-function: ease-out;
    -ms-transformtransition-property: -webkit-transform;
    -ms-transformtransition-duration: 1.0s, 1.0s;
    -ms-transformtransition-delay: 0.0s, 0.0s;
    -ms-transformtransition-timing-function: ease-out;
    transition-property:  transform;
    transition-duration: 1.0s, 1.0s;
    transition-delay: 0.0s, 0.0s;
    transition-timing-function: ease-out;
    transform: rotate(-180deg) scale(0.001);
}

Answer 1

Не вижу проблем со шкалой (0.0). Я изменил ваш код, чтобы удалить префиксы поставщика и двойные свойства для перехода, хотя он был только один, и использовал: hover в качестве цели перехода. Наведите курсор на «текст», чтобы вызвать переход.

h1 {
  outline: 1px solid red;
  transform: rotate(0deg) scale(1.0);
}

h1:hover {
  transition-property: transform;
  transition-duration: 1s;
  transition-delay: 0.0s;
  transition-timing-function: ease-out;
  transform: rotate(-180deg) scale(0.0);
}

above
<h1 class="blue centred">text</h1>
below