# Animation Timing Function

Set how an animation progresses through each cycle.

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

Chrome 43 · Edge 12 · Firefox 16 · Safari 9

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

> **Note**
>
> `l`, `ei`, `eo` & `io` are the built-in curves, the CSS keywords. Every other
> name comes from `theme.easings` in your config.

## Variants

Prefix any class with a variant to apply it only under that condition. Variants stack, as in `@md:h:atf:eo`.

### Breakpoints

Apply a class from a viewport width up. Each breakpoint covers its width & every width above it.

| Class | Applies |
|-------|---------|
| `@xs:atf:eo` | From 32rem up. |
| `@sm:atf:eo` | From 40rem up. |
| `@md:atf:eo` | From 48rem up. |
| `@lg:atf:eo` | From 64rem up. |
| `@xl:atf:eo` | From 80rem up. |
| `@xxl:atf:eo` | From 96rem up. |

### Containers

Apply a class from a container's width up, not the viewport's. Mark the parent with `ct:is` first.

| Class | Applies |
|-------|---------|
| `@c:xs:atf:eo` | Container from 32rem up. |
| `@c:sm:atf:eo` | Container from 40rem up. |
| `@c:md:atf:eo` | Container from 48rem up. |
| `@c:lg:atf:eo` | Container from 64rem up. |
| `@c:xl:atf:eo` | Container from 80rem up. |
| `@c:xxl:atf:eo` | Container from 96rem up. |

### Media

Apply a class when the device or the page matches a condition, or on the first frame an element renders.

| Class | Applies |
|-------|---------|
| `@pc:atf:eo` | On a touch screen. |
| `@prm:atf:eo` | With reduced motion on. |
| `@st:atf:eo` | On the first frame. |

### States

Apply a class only while the element is in a state, such as hovered, focused or checked.

| Class | Applies |
|-------|---------|
| `h:atf:eo` | On :hover. |
| `f:atf:eo` | On :focus. |
| `fv:atf:eo` | On :focus-visible. |
| `a:atf:eo` | On :active. |
| `d:atf:eo` | On :disabled. |
| `fc:atf:eo` | On :first-child. |
| `c:atf:eo` | On :checked. |
| `e:atf:eo` | On :empty. |
| `fw:atf:eo` | On :focus-within. |
| `i:atf:eo` | On :invalid. |
| `in:atf:eo` | On :indeterminate. |
| `lc:atf:eo` | On :last-child. |
| `nc:atf:eo` | On :nth-child. |
| `r:atf:eo` | On :required. |
| `ro:atf:eo` | On :read-only. |
| `v:atf:eo` | On :valid. |

### Pseudo Elements

Style a part of the element rather than the element itself, such as its placeholder or the selected text.

| Class | Applies |
|-------|---------|
| `a::atf:eo` | On ::after. |
| `b::atf:eo` | On ::before. |
| `p::atf:eo` | On ::placeholder. |
| `s::atf:eo` | On ::selection. |

## Define Easings

Name a curve once in `theme.easings`, written as any CSS timing function. Each name becomes a `ttf:` & an `atf:` class.

```mjs title="yumma.config.mjs" mark={5-7}
import { defineConfig } from "yummacss";

export default defineConfig({
  theme: {
    easings: {
      "out-quart": "cubic-bezier(0.25, 1, 0.5, 1)",
    },
  },
});
```

```tsx title="page.tsx" "atf:out-quart"
<span className="d:b an:spin adu:700 atf:out-quart aic:inf"></span>
```

```css title="output.css"
.atf\:out-quart {
  animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}
```