---
title: Animasyonlar
description: Tema genelinde kullanılacak animasyon tanımları.
icon: CirclePlay
---

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

Sol kısımdaki **Global Değerler** bölümünden **Animasyonlar**a tıklayarak bu alana ulaşabilirsiniz. **Animasyon ekle** diyerek yeni bir animasyon tanımı yapabilirsiniz.

Her animasyon tanımında **tip** seçimi yapılır. Bu seçim animasyonun yapısını ve kullanım amacını belirler.

## Keyframe

Keyframe tipi, CSS'teki `animation` özelliğine karşılık gelir. Bu tipte istediğiniz sayıda **point** ekleyerek animasyonun her aşamasını ayrı ayrı stillendirebilirsiniz. Her point'te element stillerindeki tüm özellikleri güncelleyebileceğiniz bir ekran açılır.

**Ayarlar** kısmında animasyonun varsayılan davranışını belirleyen özellikler yer alır. Bu özellikler element stillerindeki [Animasyon](https://builders.ikas.com/tr/docs/ikas-studio/content-and-design/elements/style/animation) sayfasında detaylı olarak açıklanmıştır. Ayarlar kısmında bu özelliklere ek olarak iki varsayılan daha bulunur:

- [Dönüşüm](https://builders.ikas.com/tr/docs/ikas-studio/content-and-design/elements/style/transform) altındaki **Dönüşüm Orijini** — `transform-origin`
- [Efektler](https://builders.ikas.com/tr/docs/ikas-studio/content-and-design/elements/style/effects) altındaki **Arka Yüz Görünürlüğü** — `backface-visibility`

## Transition

Transition tipi yalnızca **0%** ve **100%** olmak üzere iki point içerir. Bu tip, elementlerin [Belli ol](https://builders.ikas.com/tr/docs/ikas-studio/content-and-design/elements/animations#belli-ol) animasyonlarında kullanılır; element görünür olduğunda sayfaya giriş ve çıkış animasyonlarını tanımlar.

**Ayarlar** kısmından **geçiş ekle** diyerek geçiş özelliklerini tanımlayabilirsiniz. Bu özellikler element stillerindeki [Geçiş](https://builders.ikas.com/tr/docs/ikas-studio/content-and-design/elements/style/transition) sayfasında detaylı olarak açıklanmıştır ve animasyonun nasıl oynatılacağına dair varsayılanları tek merkezden belirlemenizi sağlar. Buna ek olarak bu kısımda da [Efektler](https://builders.ikas.com/tr/docs/ikas-studio/content-and-design/elements/style/effects) altındaki **Arka Yüz Görünürlüğü** — `backface-visibility` bulunur.

<Callout type="info" title="Otomatik eklenen animasyonlar">
ikas tarafından hazırlanmış animasyonlar (keyframe tipinde `spin`, transition tipinde [Belli ol](https://builders.ikas.com/tr/docs/ikas-studio/content-and-design/elements/animations#belli-ol) animasyonları gibi) element üzerinden seçildiğinde ilgili animasyon tanımı bu kısma otomatik olarak eklenir.
</Callout>