---
title: Animasyonlar
description: Elementlere animasyon ekleme ve yapılandırma.
icon: CirclePlay
---

<Callout type="warning" title="Erişim">
Bu alana erişim yalnızca **Tasarım** modunda mümkündür.
</Callout>

Bu bölüme, bir element seçtikten sonra sağ kısımdaki aksiyonlar sekmesi altındaki animasyonlar alanından ulaşabilirsiniz. Elementlere ekleyebileceğiniz animasyon türleri şunlardır:

- **Üzerine gel** — `:hover`
- **Aktif** — `:active`
- **Odaklanma** — `:focus`
- **Görünür odaklanma** — `:focus-visible`
- **Yer tutucu** — `::placeholder`
- **Belli ol** — `:appear`

**Belli ol** dışındaki tüm seçenekler CSS'teki **Pseudo Selector**'lere karşılık gelir.

<Callout type="info" title="Bileşenler">
Bileşenlere özel durum olarak da **Üzerine gel** `:hover` ve **Aktif** `:active` eklemesi yapabilirsiniz. Bu durumlar yalnızca bileşenlere uygulanabilirken, buradaki animasyonları istediğiniz elementin istediğiniz kısmından ekleyebilirsiniz. Daha fazla bilgi için [Bileşenler](https://builders.ikas.com/tr/docs/ikas-studio/content-and-design/components) sayfasını inceleyebilirsiniz.
</Callout>

## Belli ol

Belli ol, elementlerin sayfada animasyonlu biçimde görünmesini sağlayarak sayfalara dinamiklik katan bir yapıdır; ikas tarafından hazırlanmış animasyonlar aşağıdaki gibidir:

- **fade**
- **fade-up**
- **fade-down**
- **fade-right**
- **fade-left**
- **fade-up-right**
- **fade-up-left**
- **fade-down-right**
- **fade-down-left**
- **flip-left**
- **flip-right**
- **flip-up**
- **flip-down**
- **zoom-in**
- **zoom-in-up**
- **zoom-in-down**
- **zoom-in-left**
- **zoom-in-right**
- **zoom-out**
- **zoom-out-up**
- **zoom-out-down**
- **zoom-out-right**
- **zoom-out-left**

Belli ol seçiminde bu animasyonlara ek olarak üç ayar daha bulunur:

- **Eşik** — Sayfanın hangi yüzdelik kısmında animasyonun oynayacağını belirler.
- **Bir Kez Oynat** — Animasyon bir kez oynadıktan sonra tekrar çalışmaz.
- **Üstten Çık** — Animasyon ekrana girdikten sonra scroll ile sayfadan çıkarken element bu animasyonla birlikte geri çıkar.

<Callout type="info" title="Global değerler">
Yukarıda verilen animasyonlar kullanım için seçilirse, global değerler kısmındaki Animasyonlar bölümüne otomatik olarak eklenir. Daha fazla bilgi için global değerlerdeki [Animasyonlar](https://builders.ikas.com/tr/docs/ikas-studio/content-and-design/global-values/animations) sayfasını inceleyebilirsiniz.
</Callout>