# Transition Timing Function

Set the speed curve for a transition effect.

**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 |
|-------|------------|-------|
| `ttf:l` | transition-timing-function | `linear` |
| `ttf:ei` | transition-timing-function | `ease-in` |
| `ttf:eo` | transition-timing-function | `ease-out` |
| `ttf:io` | transition-timing-function | `ease-in-out` |

### Media Queries

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

| Class | Properties | Value |
|-------|------------|-------|
| `ttf:l` | transition-timing-function | `linear` |
| `ttf:ei` | transition-timing-function | `ease-in` |
| `ttf:eo` | transition-timing-function | `ease-out` |
| `ttf:io` | transition-timing-function | `ease-in-out` |

### Pseudo Classes

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

| Class | Properties | Value |
|-------|------------|-------|
| `ttf:l` | transition-timing-function | `linear` |
| `ttf:ei` | transition-timing-function | `ease-in` |
| `ttf:eo` | transition-timing-function | `ease-out` |
| `ttf:io` | transition-timing-function | `ease-in-out` |