Sobre este problema HTML
No CSS, a maioria dos valores numéricos de 0 não precisa de uma unidade — por exemplo, margin: 0 é perfeitamente válido porque a especificação permite zero sem unidade para valores <length>. No entanto, esta exceção não se aplica a valores <time>. Propriedades que aceitam valores <time>, como transition-delay, transition-duration, animation-delay e animation-duration, sempre requerem uma unidade (s para segundos ou ms para milissegundos), mesmo quando o valor é zero.
A especificação CSS declara explicitamente que valores <time> devem incluir uma unidade. A abreviação 0 sem unidade só é permitida para <length> e alguns outros tipos de valores. Embora alguns navegadores possam aceitar silenciosamente transition-delay: 0 e tratá-lo como 0s, este comportamento não é padrão e não é garantido em todos os navegadores ou implementações futuras. Depender dele pode levar a renderização inconsistente e falhará na validação CSS do W3C.
Este problema aparece comumente quando transition-delay é definido como parte da abreviação transition, ou quando os programadores assumem que 0 é universalmente válido sem uma unidade no CSS.
Como corrigir
Adicione a unidade s (segundos) ou ms (milissegundos) a qualquer valor <time> que atualmente seja apenas 0:
-
0→0sou0ms -
Verifique tanto as propriedades individuais (
transition-delay,transition-duration) quanto a abreviaçãotransition.
Exemplos
Incorreto — zero sem unidade
<style>
.fade {
transition-delay: 0;
transition-duration: 0.3s;
transition-property: opacity;
}
</style>
<div class="fade">Olá</div>
O validador reporta: CSS: “transition-delay”: “0” não é um valor “transition-delay” válido.
Correto — com unidade de tempo
<style>
.fade {
transition-delay: 0s;
transition-duration: 0.3s;
transition-property: opacity;
}
</style>
<div class="fade">Olá</div>
Incorreto — zero sem unidade na abreviação transition
<style>
.btn {
transition: background-color 0.2s ease 0;
}
</style>
<button class="btn">Clique em mim</button>
O quarto valor na abreviação transition é o atraso, e 0 sem uma unidade é inválido.
Correto — abreviação com unidade de tempo
<style>
.btn {
transition: background-color 0.2s ease 0s;
}
</style>
<button class="btn">Clique em mim</button>
Múltiplas transições
Ao especificar atrasos para múltiplas propriedades, certifique-se de que cada valor <time> tem uma unidade:
<style>
.card {
transition-property: opacity, transform;
transition-duration: 0.3s, 0.5s;
transition-delay: 0s, 0.1s;
}
</style>
<div class="card">Conteúdo</div>
A mesma regra aplica-se a transition-duration e às propriedades animation-delay e animation-duration — sempre inclua s ou ms, mesmo para valores zero.
Encontre problemas como este automaticamente
O Rocket Validator analisa milhares de páginas em segundos, detetando problemas HTML em todo o seu site.