Hareket

Merid'de hareket sakindir. Bir şeyin olduğunu doğrular, izlenmeyi hiçbir zaman beklemez.

Token'lar

Token	Değer	Kullanım
`--mrd-duration-fast`	`100ms`	Basma geri bildirimi
`--mrd-duration`	`150ms`	Renk, kenarlık ve gölge değişimleri
`--mrd-duration-slow`	`200ms`	Yükselme, dönme, overlay
`--mrd-ease`	`cubic-bezier(.2, 0, 0, 1)`	Tüm geçişler

Giriş animasyonları 220ms'lik bir fade kullanır: eleman 4px yükselerek yerine otururken opaklık 0'dan 1'e çıkar.

Desenler

Hover arka planı renklendirir ya da elemanı 2–3px yükseltir.
Basma 100ms içinde .97'ye küçültür.
Açılma fade ile belirir ve yükselir; overlay'ler arka plan örtüsünü aynı anda fade ile getirir.
Dönme yalnızca açılır-kapanır ikonlar içindir; örneğin accordion'daki artı işaretinin 45° dönmesi.

Azaltılmış hareket

Kullanıcı azaltılmış hareket istediğinde Merid, skeleton shimmer dahil tüm geçiş ve animasyonları tamamen kaldırır. State yine anında değişir, yani hiçbir şey kaybolmaz.

css

@media (prefers-reduced-motion: reduce) {
  .your-component {
    transition: none;
  }
}

Merid'in base layer'ı bunu .mrd-root içindeki her şeye uygular; her component de azaltılmış harekette kendi hareketini bırakır.