# CSS: “transition-delay”: “0” is not a “transition-delay” value.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-transition-delay-0-is-not-a-transition-delay-value
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

In CSS, most numeric values of `0` don't need a unit — for example, `margin: 0` is perfectly valid because the specification allows unitless zero for `<length>` values. However, this exception does **not** apply to `<time>` values. Properties that accept `<time>` values, such as `transition-delay`, `transition-duration`, `animation-delay`, and `animation-duration`, always require a unit (`s` for seconds or `ms` for milliseconds), even when the value is zero.

The CSS specification explicitly states that `<time>` values must include a unit. The unitless `0` shorthand is only permitted for `<length>` and a few other value types. While some browsers may silently accept `transition-delay: 0` and treat it as `0s`, this behavior is non-standard and not guaranteed across all browsers or future implementations. Relying on it can lead to inconsistent rendering and will fail W3C CSS validation.

This issue commonly appears when `transition-delay` is set as part of the `transition` shorthand, or when developers assume that `0` is universally valid without a unit in CSS.

## How to fix it

Add the `s` (seconds) or `ms` (milliseconds) unit to any `<time>` value that is currently a bare `0`:

- `0` → `0s` or `0ms`
- Check both longhand properties (`transition-delay`, `transition-duration`) and the `transition` shorthand.

## Examples

### Incorrect — unitless zero

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

The validator reports: **CSS: "transition-delay": "0" is not a "transition-delay" value.**

### Correct — with time unit

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

### Incorrect — unitless zero in the `transition` shorthand

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

The fourth value in the `transition` shorthand is the delay, and `0` without a unit is invalid.

### Correct — shorthand with time unit

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

### Multiple transitions

When specifying delays for multiple properties, ensure every `<time>` value has a unit:

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

The same rule applies to `transition-duration` and the `animation-delay` and `animation-duration` properties — always include `s` or `ms`, even for zero values.