Validación HTML: CSS: "transition-delay": "0" no es un valor de "transition-delay".

Acerca de este problema HTML

En CSS, la mayoría de valores numéricos de 0 no necesitan una unidad — por ejemplo, margin: 0 es perfectamente válido porque la especificación permite cero sin unidad para valores <length>. Sin embargo, esta excepción no se aplica a valores <time>. Las propiedades que aceptan valores <time>, como transition-delay, transition-duration, animation-delay, y animation-duration, siempre requieren una unidad (s para segundos o ms para milisegundos), incluso cuando el valor es cero.

La especificación CSS establece explícitamente que los valores <time> deben incluir una unidad. La forma abreviada 0 sin unidad solo está permitida para <length> y algunos otros tipos de valores. Aunque algunos navegadores pueden aceptar silenciosamente transition-delay: 0 y tratarlo como 0s, este comportamiento no es estándar y no está garantizado en todos los navegadores o implementaciones futuras. Confiar en ello puede llevar a una renderización inconsistente y fallará la validación CSS de W3C.

Este problema aparece comúnmente cuando transition-delay se establece como parte de la forma abreviada transition, o cuando los desarrolladores asumen que 0 es universalmente válido sin una unidad en CSS.

Cómo solucionarlo

Añade la unidad s (segundos) o ms (milisegundos) a cualquier valor <time> que actualmente sea un 0 desnudo:

0 → 0s o 0ms
Revisa tanto las propiedades individuales (transition-delay, transition-duration) como la forma abreviada transition.

Ejemplos

Incorrecto — cero sin unidad

<style>
  .fade {
    transition-delay: 0;
    transition-duration: 0.3s;
    transition-property: opacity;
  }
</style>
<div class="fade">Hello</div>

El validador reporta: CSS: “transition-delay”: “0” no es un valor de “transition-delay”.

Correcto — con unidad de tiempo

<style>
  .fade {
    transition-delay: 0s;
    transition-duration: 0.3s;
    transition-property: opacity;
  }
</style>
<div class="fade">Hello</div>

Incorrecto — cero sin unidad en la forma abreviada `transition`

<style>
  .btn {
    transition: background-color 0.2s ease 0;
  }
</style>
<button class="btn">Click me</button>

El cuarto valor en la forma abreviada transition es el delay, y 0 sin una unidad es inválido.

Correcto — forma abreviada con unidad de tiempo

<style>
  .btn {
    transition: background-color 0.2s ease 0s;
  }
</style>
<button class="btn">Click me</button>

Múltiples transiciones

Al especificar delays para múltiples propiedades, asegúrate de que cada valor <time> tenga una unidad:

<style>
  .card {
    transition-property: opacity, transform;
    transition-duration: 0.3s, 0.5s;
    transition-delay: 0s, 0.1s;
  }
</style>
<div class="card">Content</div>

La misma regla se aplica a transition-duration y las propiedades animation-delay y animation-duration — siempre incluye s o ms, incluso para valores de cero.