A transition-durationpropriedade, normalmente usada como transitionabreviação, é usada para definir a duração de uma transição especificada. Ou seja, o tempo que levará para o elemento de destino fazer a transição entre dois estados definidos.
.example ( transition-duration: 3s; )O valor pode ser um dos seguintes:
- Um valor de tempo válido (definido em segundos ou milissegundos)
- Uma lista separada por vírgulas de valores de tempo, para a transição de várias propriedades em um único elemento
O valor padrão para transition-durationé 0s, o que significa que nenhuma transição ocorrerá e a alteração da propriedade ocorrerá imediatamente, mesmo se as outras propriedades relacionadas à transição forem definidas. O valor de tempo pode ser expresso como um número decimal para um tempo mais preciso e valores negativos não são permitidos.
O CodePen a seguir mostra um efeito de foco em uma caixa que usa um transition-durationvalor de 1spara alterar gradualmente a cor de fundo:
Para compatibilidade em todos os navegadores compatíveis, os prefixos do fornecedor são necessários, com a sintaxe padrão declarada por último:
.example ( -webkit-transition-duration: 700ms; -moz-transition-duration: 700ms; -o-transition-duration: 700ms; transition-duration: 700ms; )O IE10 (a primeira versão estável do IE com suporte transition-duration) não requer o -ms-prefixo.
Suporte para navegador
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Funciona | Funciona | 4+ | 10,5+ | 10+ | 2.1+ | 3,2+ |