---
title: Hareket
description: Kısa, fiziksel ve tutarlı. Bileşenler hareketi kendileri taşır.
---

Bileşenler animasyonlarını kendileri taşır; uygulama kodunda yeni bir spring veya easing eğrisi yazmanız gerekmez.

```bash
npx shadcn@latest add @ikas/motion
```

## Eğriler

CSS tarafında `--ease-*` token'ları, `motion/react` tarafında aynı değerler `@/lib/motion` içinde bulunur. Farkı görmek için eğrileri oynatın.

_Görsel blok: Easing playground._ [Önizlemeyi aç](https://builders.ikas.com/ui-preview/embed/motion-easing)

## Token'lar

| Token | Değer | Kullanım |
| --- | --- | --- |
| `SPRING` | stiffness 350, damping 35 | Kayan pill, morph, giriş ve çıkış, sayı değişimi. Taşma yok, yaklaşık 230ms'de oturur. |
| `ICON_SPRING` | stiffness 350, damping 28 | Yalnızca ikonlar. Yaklaşık %3 taşma ikona canlılık verir. |
| `EASE_OUT` | `cubic-bezier(0.23, 1, 0.32, 1)` | Giren ve çıkan her şey. |
| `EASE_IN_OUT` | `cubic-bezier(0.77, 0, 0.175, 1)` | Ekranda yer veya şekil değiştiren öğe. |
| `EASE_REVEAL` | `cubic-bezier(0.33, 1, 0.68, 1)` | Tetikleyicisinden büyüyen overlay'ler. |
| `EASE_DRAWER` | `cubic-bezier(0.32, 0.72, 0, 1)` | Sheet, drawer ve kenar menü. |

```tsx
import { motion, useReducedMotion } from "motion/react"
import { springOrInstant } from "@/lib/motion"

const reduce = useReducedMotion()
<motion.div layoutId="pill" transition={springOrInstant(reduce)} />
```

## Süreler

| Durum | Süre | Not |
| --- | --- | --- |
| Hover ve renk | 150ms | `transition-colors duration-150` |
| Basma geri bildirimi | 150ms | `translate-y-px` veya `scale-[0.98]` |
| İçerik belirmesi ve sönmesi | 150ms / 100ms | Çıkış her zaman girişten kısadır |
| Popover ve Dialog | 300ms / 200ms | `EASE_REVEAL`, tetikleyiciden büyür |
| İkon animasyonu | en fazla 450ms | Bir kez oynar, döngüye girmez |
| Liste girişi (stagger) | 360ms + 60ms × i | Yalnızca ilk yüklemede |

## Kurallar

1. Hareket bilgi taşır: bir şeyin nereden geldiğini, değiştiğini veya basıldığını gösterir. Süs için animasyon eklemeyin.
2. Spring ve eğrileri elle yazmayın; `@/lib/motion` veya `--ease-*` token'larını kullanın.
3. `transition-all` kullanmayın. Değişen özellikleri tek tek listeleyin.
4. Tailwind v4'te `translate-*` ve `scale-*` sınıfları `translate` ve `scale` özelliklerine derlenir. Geçiş listesine `transform` değil `translate` ve `scale` yazın; aksi halde basma efekti sıçrar.
5. Her animasyonun reduced-motion karşılığı vardır: `motion/react` tarafında `springOrInstant(useReducedMotion())`, CSS tarafında `motion-reduce:*`. Transform düşer, opaklık kalır.
6. Döngüye giren animasyon yalnızca yükleniyor durumunda kullanılır (Spinner, Skeleton).
7. Veri değişimi animasyonlu olabilir (Animated Number); veri ilk kez gelirken tek seferlik fade yeterlidir.

<Callout type="info" title="Erişilebilirlik">
Reduced-motion tercihi açık olan kullanıcılar için transform animasyonları kapanır, yalnızca opaklık geçişi kalır. Bu davranış bileşenlerde varsayılan olarak gelir.
</Callout>