# Transition Delay

Set the delay before a transition effect starts.

**Widely available.** This feature is well established and works across many devices and browser versions.

Chrome 26 · Edge 12 · Firefox 16 · Safari 9

| Class | Properties | Value |
|-------|------------|-------|
| `td:0` | transition-delay | `0` |
| `td:50` | transition-delay | `50ms` |
| `td:100` | transition-delay | `100ms` |
| `td:150` | transition-delay | `150ms` |
| `td:200` | transition-delay | `200ms` |
| `td:250` | transition-delay | `250ms` |
| `td:300` | transition-delay | `300ms` |
| `td:350` | transition-delay | `350ms` |
| `td:400` | transition-delay | `400ms` |
| `td:450` | transition-delay | `450ms` |
| `td:500` | transition-delay | `500ms` |
| `td:550` | transition-delay | `550ms` |
| `td:600` | transition-delay | `600ms` |
| `td:650` | transition-delay | `650ms` |
| `td:700` | transition-delay | `700ms` |
| `td:750` | transition-delay | `750ms` |
| `td:800` | transition-delay | `800ms` |
| `td:850` | transition-delay | `850ms` |
| `td:900` | transition-delay | `900ms` |
| `td:950` | transition-delay | `950ms` |
| `td:1000` | transition-delay | `1000ms` |

### Media Queries

Prefix a class with a breakpoint to apply it from that width up.

| Class | Properties | Value |
|-------|------------|-------|
| `td:0` | transition-delay | `0` |
| `td:50` | transition-delay | `50ms` |
| `td:100` | transition-delay | `100ms` |
| `td:150` | transition-delay | `150ms` |
| `td:200` | transition-delay | `200ms` |
| `td:250` | transition-delay | `250ms` |
| `td:300` | transition-delay | `300ms` |
| `td:350` | transition-delay | `350ms` |
| `td:400` | transition-delay | `400ms` |
| `td:450` | transition-delay | `450ms` |
| `td:500` | transition-delay | `500ms` |
| `td:550` | transition-delay | `550ms` |
| `td:600` | transition-delay | `600ms` |
| `td:650` | transition-delay | `650ms` |
| `td:700` | transition-delay | `700ms` |
| `td:750` | transition-delay | `750ms` |
| `td:800` | transition-delay | `800ms` |
| `td:850` | transition-delay | `850ms` |
| `td:900` | transition-delay | `900ms` |
| `td:950` | transition-delay | `950ms` |
| `td:1000` | transition-delay | `1000ms` |

### Pseudo Classes

Prefix a class with a state to apply it only while that state matches.

| Class | Properties | Value |
|-------|------------|-------|
| `td:0` | transition-delay | `0` |
| `td:50` | transition-delay | `50ms` |
| `td:100` | transition-delay | `100ms` |
| `td:150` | transition-delay | `150ms` |
| `td:200` | transition-delay | `200ms` |
| `td:250` | transition-delay | `250ms` |
| `td:300` | transition-delay | `300ms` |
| `td:350` | transition-delay | `350ms` |
| `td:400` | transition-delay | `400ms` |
| `td:450` | transition-delay | `450ms` |
| `td:500` | transition-delay | `500ms` |
| `td:550` | transition-delay | `550ms` |
| `td:600` | transition-delay | `600ms` |
| `td:650` | transition-delay | `650ms` |
| `td:700` | transition-delay | `700ms` |
| `td:750` | transition-delay | `750ms` |
| `td:800` | transition-delay | `800ms` |
| `td:850` | transition-delay | `850ms` |
| `td:900` | transition-delay | `900ms` |
| `td:950` | transition-delay | `950ms` |
| `td:1000` | transition-delay | `1000ms` |