# Transition Duration

Set the amount of time a transition takes to complete.

**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 |
|-------|------------|-------|
| `tdu:0` | transition-duration | `0` |
| `tdu:50` | transition-duration | `50ms` |
| `tdu:100` | transition-duration | `100ms` |
| `tdu:150` | transition-duration | `150ms` |
| `tdu:200` | transition-duration | `200ms` |
| `tdu:250` | transition-duration | `250ms` |
| `tdu:300` | transition-duration | `300ms` |
| `tdu:350` | transition-duration | `350ms` |
| `tdu:400` | transition-duration | `400ms` |
| `tdu:450` | transition-duration | `450ms` |
| `tdu:500` | transition-duration | `500ms` |
| `tdu:550` | transition-duration | `550ms` |
| `tdu:600` | transition-duration | `600ms` |
| `tdu:650` | transition-duration | `650ms` |
| `tdu:700` | transition-duration | `700ms` |
| `tdu:750` | transition-duration | `750ms` |
| `tdu:800` | transition-duration | `800ms` |
| `tdu:850` | transition-duration | `850ms` |
| `tdu:900` | transition-duration | `900ms` |
| `tdu:950` | transition-duration | `950ms` |
| `tdu:1000` | transition-duration | `1000ms` |

### Media Queries

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

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

### Pseudo Classes

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

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