Skip to main content
Validação HTML

CSS: “transition-delay”: “0” não é um valor “transition-delay” válido.

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:

  • 00s ou 0ms
  • Verifique tanto as propriedades individuais (transition-delay, transition-duration) quanto a abreviação transition.

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.

Ajude-nos a melhorar os nossos guias

Este guia foi útil?

Pronto para validar os seus sites?
Comece o seu teste gratuito hoje.