Qual é a combinação certa de prefixos para transições e transformações CSS?
Qual seria a maneira correta de prefixar esse CSS para cobrir a maior variedade de navegadores e versões?
Versão 1:
-webkit-transition: -webkit-transform .3s ease-in-out;
-moz-transition: -moz-transform .3s ease-in-out;
-ms-transition: -ms-transform .3s ease-in-out;
-o-transition: -o-transform .3s ease-in-out;
transition: transform .3s ease-in-out;
-webkit-transform: rotateX(-30deg);
-moz-transform: rotateX(-30deg);
-ms-transform: rotateX(-30deg);
-o-transform: rotateX(-30deg);
transform: rotateX(-30deg);
Ou versão 2:
-webkit-transition: transform .3s ease-in-out;
-moz-transition: transform .3s ease-in-out;
-ms-transition: transform .3s ease-in-out;
-o-transition: transform .3s ease-in-out;
transition transform .3s ease-in-out;
-webkit-transform: rotateX(-30deg);
-moz-transform: rotateX(-30deg);
-ms-transform: rotateX(-30deg);
-o-transform: rotateX(-30deg);
transform: rotateX(-30deg);
Parece-me que, ao usar prefixos de fornecedor em uma propriedade de transição, também devo direcionar o atributo prefixado de fornecedor que desejo fazer a transição.
Eu realmente não consigo encontrar nenhum fechamento para isso.