View Transitions API Nedir, Web Sitelerinde Nasıl Kullanılır?

View Transitions API, web sayfaları arasında veya tek sayfa uygulamalarında (SPA) akıcı geçiş animasyonları oluşturmayı sağlayan modern bir tarayıcı arayüzüdür. Klasik web navigasyonundaki sert, kesintili ekran geçişlerini ortadan kaldıran bu yerel tarayıcı yeteneği; harici animasyon kütüphanelerine duyulan ihtiyacı azaltarak web platformunda mobil uygulama benzeri, akıcı bir kullanıcı deneyimi sunar. Teknik liderler, web tasarım mimarları ve dijital ürün yöneticileri için bu teknoloji, hem performansı optimize etme hem de kullanıcı etkileşimini artırma noktasında güçlü bir alternatif sunmaktadır. İlgili arayüzün teknik mimarisi, entegrasyon adımları ve kurumsal projelerdeki operasyonel etkileri teknik doğruluk prensipleri çerçevesinde incelenmelidir.

View Transitions API Kavramına Giriş

Geleneksel Sayfa Geçişlerinden Farkı Nedir?

Geleneksel web geliştirme süreçlerinde, iki farklı sayfa veya uygulama durumu arasında akıcı geçiş animasyonları oluşturmak her zaman yüksek mühendislik eforu ve ciddi performans maliyetleri gerektirmiştir. Klasik yaklaşımda, tarayıcı yeni bir adrese yönlendiğinde mevcut DOM (Document Object Model) tamamen yok edilir, sunucudan yeni HTML belgesi istenir ve bu belge sıfırdan parse edilerek render sürecine sokulur. Bu süreçte kullanıcının karşılaştığı beyaz ekran veya ani içerik sıçramaları, tarayıcının doğal çalışma prensiplerinin kaçınılmaz bir sonucudur. Yazılım ekipleri bu problemi aşmak için uzun yıllar boyunca "Single Page Application" (SPA) mimarilerine ve bu mimariler üzerinde çalışan Barba.js, Framer Motion, GSAP (GreenSock) veya React Transition Group gibi ağır JavaScript kütüphanelerine sığınmıştır.

Ancak bu kütüphanelerin çalışma mantığı, tarayıcı seviyesinde değil, tamamen uygulama katmanında (JavaScript execution) gerçekleşir. İki ekran arasında geçiş yapabilmek için eski ve yeni DOM elemanlarının aynı anda bellek üzerinde tutulması, eski elemanın animasyonla opaklığının azaltılması ve bu esnada yeni elemanın DOM'a enjekte edilerek eş zamanlı olarak boyutlandırılması gerekir. Bu durum, DOM ağacının yapay olarak şişmesine, ana iş parçacığının (main thread) aşırı yüklenmesine ve özellikle düşük donanımlı mobil cihazlarda ciddi performans darboğazlarına yol açar. CPU tabanlı bu hesaplamalar, tarayıcının optimizasyon mekanizmalarını devre dışı bırakarak animasyon kare hızının (Frame Rate) 60 FPS değerinin altına düşmesine neden olur.

View Transitions API ise bu süreci tamamen tarayıcı çekirdeğine (browser engine) ve ekran kartı hızlandırıcısına (GPU compositor) devreder. Geliştiricinin yaptığı tek şey, DOM'un ne zaman değişeceğini tarayıcıya bildirmektir. Tarayıcı, değişiklik öncesindeki ekranın statik bir görüntüsünü (snapshot) alır, ardından DOM'un güncellenmesini bekler ve güncellenmiş halinin de yeni bir görüntüsünü çıkartarak bu iki görsel katman arasında donanım hızlandırmalı geçişi otomatik olarak yönetir. Bu sayede, DOM üzerinde hiçbir zaman mükerrer eleman barındırılmaz, bellek sızıntılarının önüne geçilir ve animasyonlar ana iş parçacığı yerine doğrudan ekran kartı (GPU) üzerinde çalıştırıldığı için donma veya takılma yaşanmaz.

Modern Web Mimarisindeki (SPA ve MPA) Yeri

Modern web mimarileri temelde iki ana kampa ayrılmıştır: Tek Sayfa Uygulamaları (SPA - Single Page Application) ve Çok Sayfa Uygulamaları (MPA - Multi-Page Application). View Transitions API, bu iki farklı mimari yaklaşımın da kullanıcı deneyimi kalitesini eşitlemek üzere tasarlanmıştır. Geçmişte bir web sitesinin "mobil uygulama benzeri" (native-like) hissettirmesi için kesinlikle karmaşık bir SPA altyapısına (React, Vue, Angular vb.) sahip olması gerektiği yönünde genel bir kabul bulunmaktaydı. Ancak bu durum, MPA yapısındaki e-ticaret siteleri, içerik yönetim sistemleri (WordPress, Drupal vb.) veya statik site üreteçleri için büyük bir dezavantaj yaratıyordu.

Ekim 2025'te "Baseline Newly Available" statüsüne ulaşan View Transitions API (single-document) sayesinde, SPA platformlarında durum yönetimi (state management) ile animasyonları senkronize etmek standart bir tarayıcı komutu haline gelmiştir. Tarayıcıların sunduğu bu yerel yetenek, SPA geliştiricilerini yüzlerce kilobaytlık animasyon kütüphanelerini projeye dahil etme zorunluluğundan kurtarmıştır. DOM manipülasyonu ne kadar büyük olursa olsun, geçişler yerel seviyede optimize edildiği için etkileşim süresi (Interaction to Next Paint - INP) gibi kritik Core Web Vitals metrikleri koruma altına alınmaktadır.

MPA tarafında ise bu API tam anlamıyla ezber bozan bir dönüşüme öncülük etmektedir. Sadece iki satırlık bir CSS deklarasyonu ile ayrı HTML sayfaları arasında geçiş yaparken dahi sanki bir SPA çalışıyormuş gibi akıcı animasyonlar tetiklenebilmektedir. Tarayıcı, sayfalar arası geçişte HTTP istekleri sürerken eski sayfanın görsel durumunu korur ve yeni sayfa render edilmeye başladığı an yumuşak bir geçiş sağlar. Bu sayede sunucu taraflı mimariler (SSR), karmaşık istemci tarafı (client-side) JavaScript routing kütüphanelerine ihtiyaç duymadan modern bir arayüz hissiyatına kavuşmaktadır.

View Transitions API Nasıl Çalışır?

Tarayıcı Tarafında Durum (State) Yakalama Mantığı

View Transitions API’nin arkasındaki mühendislik dehası, tarayıcının render sürecini (rendering pipeline) üç aşamalı bir "snapshot ve karşılaştırma" mekanizmasına tabi tutmasıdır. Geliştirici document.startViewTransition(callback) metodunu çağırdığında, tarayıcının render motoru anlık olarak çalışmayı duraklatır. Bu duraklama anında, mevcut ekranın o anki durumu taranır ve bellek üzerinde geçici bir grafiksel katman (snapshot) olarak saklanır. Bu işleme "eski durumun yakalanması" (capture old state) denir. Bu aşamada elde edilen katman tamamen statik bir görsel temsildir.

İkinci aşamada, geliştiricinin parametre olarak geçtiği callback fonksiyonu çalıştırılır ve DOM üzerinde güncellemeler (örneğin yeni elemanların eklenmesi, eskilerin silinmesi veya sınıf değişiklikleri) gerçekleştirilir. Tarayıcı, bu callback fonksiyonunun tamamlanmasını bekler. Eğer callback bir asenkron fonksiyon (Promise) döndürüyorsa, tarayıcı bu söz çözülene (resolve olana) kadar beklemeye devam eder. DOM güncellendikten sonra render motoru, yeni arayüzün de anlık bir ekran görüntüsünü alır. Bu da "yeni durumun yakalanması" (capture new state) aşamasıdır.

Nihai aşamada tarayıcı, elindeki bu iki farklı zaman dilimine ait ekran görüntülerini üst üste koyarak donanım hızlandırmalı bir animasyon katmanı oluşturur. Bu süreçte tarayıcı, standart HTML döküman ağacının üzerine geçici olarak sanal bir CSS sözde eleman (pseudo-element) ağacı inşa eder. Bu geçici ağaç, animasyon süresince aktif kalır ve animasyon tamamlandığında tarayıcı tarafından otomatik olarak bellekten temizlenir. Bu pseudo-element ağacının hiyerarşik yapısı ve her bir katmanın görevi aşağıdaki tabloda detaylandırılmıştır:

CSS ve JavaScript Entegrasyonunun Temelleri

API'nin çalışma döngüsünü kontrol etmek ve özelleştirmek için JavaScript ve CSS'in ortak bir sinerjiyle çalışması gerekir. JavaScript tarafında tetiklenen @@CODE0@@ çağrısı, geriye kontrol edilebilir dinamik bir nesne döndürür. Bu nesne üzerinden dönen Promise yapıları, geçişin farklı evrelerinde arayüze müdahale etme şansı tanır. Örneğin, @@CODE1@@ sözü çözüldüğünde animasyonun başlayacağı kesinleşmiştir ve bu aşamada JS Web Animations API kullanılarak özel zamanlamalar veya efektler tanımlanabilir. transition.finished sözü ise animasyonun bittiğini ve arayüzün normal çalışma akışına döndüğünü belgeler.

CSS tarafında ise geçişleri kontrol eden en kritik özellik @@CODE0@@ deklarasyonudur. Varsayılan olarak tarayıcı, tüm sayfayı kapsayacak şekilde @@CODE1@@ ismini kullanır ve tüm ekranı kapsayan basit bir çapraz geçiş (cross-fade) uygular. Ancak sayfa üzerindeki belirli elemanların (örneğin bir ürün görseli, profil resmi veya buton) konum değiştirerek yeni yerlerine "akarak" gitmesini istiyorsak, bu elemanlara benzersiz bir view-transition-name değeri atamamız gerekir.

/* Stil dosyasında benzersiz geçiş ismi tanımlama */
.product-card-thumbnail {
  view-transition-name: active-product-image;
}

Yukarıdaki tanımlama yapıldığında, tarayıcı DOM değişimi esnasında eski sayfadaki @@CODE0@@ elemanı ile yeni sayfada aynı isme (@@CODE1@@) sahip olan elemanı otomatik olarak eşleştirir. İki elemanın ekrandaki koordinatlarını (X ve Y düzlemi) ve fiziksel boyutlarını hesaplayarak, eski elemandan yeni elemana doğru kesintisiz bir morfolojik (morphing) geçiş animasyonu üretir. Bu süreçte herhangi bir matematiksel koordinat hesabı yapılmasına veya harici bir JS kütüphanesinin çalışmasına gerek kalmaz.

Web Sitelerinde View Transitions API Kullanım Rehberi

Single Page Application (SPA) Projelerinde Uygulama Adımları

Tek Sayfa Uygulamalarında (SPA) sayfa yönlendirmeleri (routing) istemci tarafındaki JavaScript kodları ile yönetilir. Dolayısıyla View Transitions API entegrasyon stratejisi, mevcut yönlendirici (router) mekanizmasının içerisine entegre edilmelidir. İster Vanilla JS ile yazılmış özel bir router olsun, ister popüler kütüphanelerin hazır yönlendiricileri, temel entegrasyon mantığı DOM güncellemesinin startViewTransition ile sarmalanmasına dayanır.

Aşağıda, Vanilla JS tabanlı bir router yapısında bu entegrasyonun en yalın ve güvenli şekilde nasıl kurgulanacağı gösterilmiştir:

// Sayfa içeriğini dinamik olarak güncelleyen fonksiyon
function navigateToPage(url) {
  // Tarayıcı desteği kontrolü (Progressive Enhancement)
  if (!document.startViewTransition) {
    loadPageContentSync(url);
    return;
  }

  // Geçiş animasyonunu başlat
  const transition = document.startViewTransition(async () => {
    // Yeni sayfa içeriğini çek ve DOM'u güncelle
    await loadPageContentAsync(url);
  });
}

React tabanlı projelerde ise durum yönetimi asenkron çalıştığı için DOM güncellemelerinin tarayıcı snapshot süreciyle çakışmaması adına @@CODE0@@ paketinde yer alan @@CODE1@@ fonksiyonundan yararlanılmalıdır. React, varsayılan olarak durum değişikliklerini toplu (batch) şekilde işler. flushSync kullanımı, React'in DOM'u hemen ve senkronize olarak güncellemesini zorunlu kılar; böylece tarayıcı yeni durumun ekran görüntüsünü tam zamanında yakalayabilir.

import { flushSync } from 'react-dom';

function handleReactNavigation(nextState) {
  if (!document.startViewTransition) {
    setCurrentState(nextState);
    return;
  }

  document.startViewTransition(() => {
    // React DOM güncellemelerini anında zorla uyguluyoruz
    flushSync(() => {
      setCurrentState(nextState);
    });
  });
}

Multi Page Application (MPA) Projelerinde Uygulama Adımları

Çok Sayfa Uygulamalarında (MPA) sayfalar arası geçiş tamamen geleneksel sunucu istekleri ile gerçekleşir. Bu mimaride istemci tarafında çalışan sürekli bir JavaScript çalışma ortamı (runtime) bulunmaz. Neyse ki View Transitions API, bu tarz klasik siteler için de sadece CSS kuralları üzerinden yürütülebilen deklaratif bir geçiş yöntemi sunmaktadır.

MPA projelerinde sayfalar arası akıcı geçişleri aktifleştirmek için sitenin global CSS dosyasına aşağıdaki kod satırını eklemek yeterlidir:

/* Tüm sayfalar arası navigasyonda yerel geçiş animasyonunu etkinleştirir */
@view-transition {
  navigation: auto;
}

Bu kural tanımlandığında, kullanıcı site içerisindeki herhangi bir bağlantıya (<a> etiketi) tıkladığında tarayıcı otomatik olarak süreci devralır. Sayfa yüklenirken eski sayfa ekranda donuk olarak bekletilir, arka planda yeni sayfanın HTML dökümanı indirilip işlenmeye başlar ve hazır olduğunda iki sayfa arasında yumuşak bir görsel geçiş tetiklenir. Bu süreçte sunucu tarafında kullanılan teknolojinin (PHP, .NET, Java, Python vb.) hiçbir önemi yoktur; tüm iş yükü tarayıcı tarafından yerel olarak çözümlenir.

Görsel Hiyerarşiyi Korumak İçin Özelleştirilmiş Animasyonlar

Tarayıcının sunduğu varsayılan çapraz geçiş (fade-out / fade-in) etkisi çoğu temel senaryo için yeterli olsa da kurumsal kimliğe ve kullanıcı deneyimi tasarımına özel animasyonlar kurgulamak marka algısını güçlendirir. CSS pseudo-element ağacını hedefleyerek varsayılan animasyon sürelerini değiştirebilir, kayma (slide), büyüme (scale) veya döndürme gibi özel efektler ekleyebiliriz.

Aşağıdaki CSS örneğinde, tüm sayfayı kapsayan varsayılan geçiş animasyonunun süresi uzatılmakta ve özel bir "cubic-bezier" eğrisi ile kayma efekti entegre edilmektedir:

/* Eski sayfanın ekrandan sola doğru kayarak çıkması */
::view-transition-old(root) {
  animation: 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-out-to-left;
}

/* Yeni sayfanın sağdan gelerek ekrana yerleşmesi */
::view-transition-new(root) {
  animation: 400ms cubic-bezier(0.4, 0, 0.2, 1) both slide-in-from-right;
}

/* Keyframe tanımlamaları */
@keyframes slide-out-to-left {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

@keyframes slide-in-from-right {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

Bu tarz özelleştirmeler yaparken dikkat edilmesi gereken en kritik tasarım kuralı, görsel hiyerarşiyi korumaktır. Örneğin, sayfanın sol üst köşesinde yer alan bir logo veya marka amblemi her sayfa geçişinde kaybolup tekrar gelmemelidir. Bu logonun sabit kalması veya kendi içinde yumuşakça dönüşmesi istenir. Bunun için logoya özel bir geçiş adı verilerek genel sayfa animasyonundan izole edilmesi gerekir:

.site-logo {
  view-transition-name: global-brand-logo;
}

Bu sayede, sayfa içeriği sağa sola kaysa bile, .site-logo sınıfına sahip eleman yerinde sabit kalarak görsel süreklilik hissini kesintisiz şekilde sürdürecektir.

Kurumsal Projelerde Dikkat Edilmesi Gereken Riskler ve Uyarılar

Tarayıcı Desteği ve Geriye Dönük Uyumluluk (Fallback) Stratejileri

Büyük ölçekli kurumsal projelerde yeni bir web standardını devreye almadan önce en kritik aşama, hedef kitlenin kullandığı tarayıcıların bu teknolojiyi ne ölçüde desteklediğidir (caniuse verileri). 2026 yılı itibarıyla, tek sayfa geçişleri (single-document) tüm modern tarayıcı motorlarında (Chromium tabanlılar, WebKit/Safari ve Gecko/Firefox) Baseline standardına ulaşmış ve geniş bir destek oranına kavuşmuştur. Ancak çok sayfalı sitelerdeki (cross-document) yerel CSS geçişleri hâlâ farklı tarayıcı motorlarında değişken olgunluk seviyelerindedir.

Bu nedenle, projelerde "Progressive Enhancement" (Aşamalı İyileştirme) felsefesi benimsenmelidir. Bu felsefeye göre, gelişmiş özellikleri destekleyen tarayıcılarda kullanıcılara en üst düzey deneyim sunulurken; desteklemeyen eski tarayıcılarda (örneğin eski kurumsal bilgisayarlardaki güncellenmemiş tarayıcı sürümleri) sistemin kırılmaması, normal ve kesintisiz şekilde çalışmaya devam etmesi sağlanır.

// Güvenli uygulama adımları için tarayıcı özelliği tespiti (feature detection)
function applySafeTransition(domUpdateLogic) {
  if (document.startViewTransition) {
    // Tarayıcı destekliyorsa akıcı geçişle çalıştır
    document.startViewTransition(() => domUpdateLogic());
  } else {
    // Tarayıcı desteklemiyorsa düzgün bir şekilde fallback çalıştır
    domUpdateLogic();
  }
}

Bu yaklaşım sayesinde, kod tabanına eklenen View Transitions özellikleri hiçbir kullanıcı için siteyi erişilemez kılmaz. Destekleyen sistemler modern animasyonları render ederken, desteklemeyen sistemler klasik sert geçiş mekanizmasını sürdürür.

Core Web Vitals ve Performans Üzerindeki Olası Etkiler

Her ne kadar View Transitions API, animasyon hesaplamalarını GPU compositor katmanına kaydırarak performansı optimize etse de, kurumsal sitelerde hatalı implementasyonlar Core Web Vitals metriklerini olumsuz etkileyebilir. Özellikle etkileşim süresi (Interaction to Next Paint - INP) ve en büyük içerikli boyama süresi (Largest Contentful Paint - LCP) yakından izlenmelidir.

Eğer startViewTransition metoduna parametre olarak geçilen callback fonksiyonu içerisinde ağır JavaScript hesaplamaları yapılıyorsa veya asenkron veri indirme işlemleri çok uzun sürüyorsa, tarayıcı yeni snapshot'ı almak için bekleyeceğinden ekran donacaktır. Bu durum, kullanıcının tıklama eylemi ile arayüzün tepki vermesi arasındaki süreyi (INP) uzatır. Bu riski minimize etmek için asenkron veri çekme süreçleri (fetch işlemleri) animasyon tetiklenmeden önce tamamlanmalı, callback fonksiyonunun içine sadece senkronize DOM manipülasyonu ve yerleşim güncellemeleri bırakılmalıdır.

Ayrıca, çok sayfalı geçişlerde tarayıcının sayfayı önceden render etmesini sağlayan "Speculation Rules API" ile birlikte kullanımda, henüz tıklanmamış linklerin arka planda işlemciyi yormaması için seçici ön yükleme (selective prefetching) stratejileri uygulanmalıdır. Aksi halde gereksiz sunucu yükü ve bant genişliği tüketimi performansı düşürebilir.

Erişilebilirlik (A11y) Standartları: Prefers-Reduced-Motion Kullanımı

Erişilebilirlik, modern web tasarımının ve kurumsal uyumluluğun (GDPR, KVKK ve yasal web standartları çerçevesinde) ayrılmaz bir parçasıdır. Vestibüler sistem bozukluğu, dikkat dağınıklığı, epilepsi veya hareket hassasiyeti olan kullanıcılar için ekrandaki ani kaymalar, hızlı zoom efektleri veya aşırı hareketli animasyonlar fiziksel rahatsızlıklara (baş dönmesi, mide bulantısı) yol açabilir.

Dünya Genelinde kabul gören WCAG (Web Content Accessibility Guidelines) standartlarına göre, kullanıcının işletim sistemi düzeyinde belirttiği "hareketi azalt" (prefers-reduced-motion) tercihine web sitelerinin mutlaka saygı göstermesi gerekmektedir. View Transitions API kullanılırken, bu durum CSS seviyesinde kolayca kontrol altına alınabilir.

/* Kullanıcı hareketi azaltmak istiyorsa geçiş animasyonlarını devre dışı bırakıyoruz */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

Yukarıdaki CSS bloğu, kurumsal projelerin erişilebilirlik denetimlerinden (A11y compliance) tam not almasını sağlar. Kullanıcı sistem ayarlarında animasyonları kapattıysa, tarayıcı geçişleri milisaniyeler içinde doğrudan ve hareketsiz şekilde gerçekleştirir, böylece hem performans korunur hem de kapsayıcı bir kullanıcı deneyimi sunulmuş olur.

View Transitions API Kullanımının İşletmelere ve Kullanıcı Deneyimine Sağladığı Avantajlar

Hemen Çıkma Oranlarına (Bounce Rate) Olumlu Etkisi

E-ticaret platformları, SaaS panelleri ve içerik üreticileri için web sitesinin hızı ve akıcılığı, doğrudan dönüşüm oranları ve ciro ile ilişkilidir. Geleneksel web sitelerinde kullanıcı bir ürüne tıkladığında yaşanan o kısa, beyaz ve kesintili boşluk hissi, insan beyninde "bekleme" algısını tetikler. Algılanan performans (perceived performance), milisaniyeler düzeyinde olsa dahi kullanıcının siteden ayrılma kararı üzerinde belirleyicidir.

View Transitions API, arka planda veri yüklenirken dahi kullanıcının görsel odak noktasını kaybetmesini engeller. Eski sayfanın yumuşak bir şekilde yeni sayfaya dönüşmesi, kullanıcının bilişsel yükünü (cognitive load) azaltır. Akıcı geçişler sayesinde arayüzün yanıt verme hızı çok daha yüksek algılanır. Bu durum, kullanıcıların sitenizde daha fazla vakit geçirmesini, sayfalar arasında daha rahat gezinmesini ve nihayetinde hemen çıkma oranlarının (bounce rate) optimize edilmesini sağlar.

Uygulama Hissi (App-like Experience) Yaratma Gücü

Mobil ekosistemde kullanıcılar iOS ve Android işletim sistemlerinin sunduğu akıcı, kayar pencereli ve fiziksel hissiyata sahip animasyonlara alışmıştır. Geleneksel web sayfaları ise bu dinamizmden uzak kaldığı için genellikle "hantal ve eski" olarak nitelendirilir. Bu durum, işletmeleri sadece web tabanlı çözümler sunmak yerine, yüksek maliyetli yerel (native) mobil uygulama geliştirme süreçlerine girmeye zorlamıştır.

View Transitions API, Progressive Web Apps (PWA) standartları ile birleştirildiğinde, web sitelerinin mobil tarayıcılarda neredeyse tamamen yerel bir mobil uygulama gibi davranmasını sağlar. Sayfa geçişleri, sekmeler arası hareketler ve dinamik liste güncellemeleri mobil cihazlardaki yerel geçiş şablonlarıyla birebir örtüşür. İşletmeler, tek bir web projesi geliştirerek hem masaüstü hem de mobil platformlarda premium bir kullanıcı deneyimi sunabilir, böylece bakım, lisanslama ve farklı platformlar için yazılım ekibi istihdam etme maliyetlerini (TCO - Total Cost of Ownership) ciddi oranda düşürebilirler.