Animasyonlu Popup'lar: Öneriler ve 10 Mükemmel Örnek

Popup'lar, web sitesi ziyaretçilerinin dikkatini çekmek ve onlara önemli bilgileri ya da özel teklifleri sunmak için popüler bir tekniktir. Ama statik popup'lar her yerde ve tam da bu yüzden görmezden geliniyor. Hareket, gözün alışkanlığını kırar ve odağı statik tasarımlardan daha hızlı tek bir harekete geçirici mesaja çeker; yine de zayıf bir teklifi dönüştürmez. Aşağıda animasyonlu popup'ın ne olduğunu, 2026'da neden dikkat çektiğini, Popupsmart'ta beş adımda ya da CSS ile elle nasıl oluşturulduğunu ve hemen kopyalayabileceğiniz on gerçek örneği anlatıyoruz. Popup hareketinin uyması gereken erişilebilirlik kuralları da burada.

Animasyonlu Popup Nedir?

Animasyonlu popup, sayfayı boğmadan dikkat çekmek için hareket (döngüdeki bir Lottie dosyası, kısa bir GIF, CSS ile kayarak gelme veya üzerine gelindiğinde oynayan bir mikro etkileşim) kullanan bir web sitesi katmanıdır. Animasyon süs değildir; gözü teklife çeken kancadır.

Animasyonlu popup'ları sıradan olanlardan üç şey ayırır:

• Hareketli bir öğe: Bir harekete geçirici mesaja, simgeye veya başlığa bağlı Lottie JSON, GIF ya da CSS ile çalışan bir dönüşüm.

• Tek bir odak noktası: Hareket, ziyaretçiyi tek bir eyleme yönlendirir: abone olmak, teklifi almak, göz atmak, takip etmek.

• Amaçlı bir tetikleyici: Her şeyi bölen, sayfa açılır açılmaz patlayan bir popup değil; çıkış niyeti, kaydırma derinliği veya sayfada geçen süre.

Popup hareketi üç türdür. Giriş efekti (belirme, kayma veya yakınlaşma) popup açılırken bir kez oynar. Döngüdeki öğe (bir Lottie dosyası veya GIF) popup'ın içinde hareket etmeye devam eder. Mikro etkileşim ziyaretçiye tepki verir; üzerine gelindiğinde kayan bir buton gibi. İyi animasyonlu popup'ların çoğu bu üçünden birini kullanır, hepsini değil.

Animasyon sektörü büyümeye devam ediyor. Yahoo Finance'te yayımlanan bir Precedence Research tahminine göre küresel animasyon pazarının 2026'daki 492,14 milyar ABD dolarından 2035'te 953,31 milyar ABD dolarına çıkması bekleniyor (Aralık 2025'te yayımlanan bir basın bülteni). Bu tahmin popup'ları değil, animasyonun tamamını kapsıyor. Hareketin dönüşüm getirdiğini kanıtlamaz; arka plan bilgisi olarak okuyun.

Animasyonlu Popup'ların Avantajları

Animasyonlu öğeler doğal olarak dikkat çeker ve hareket ne kadar ölçülü olursa her avantaj o kadar iyi çalışır. Hiçbiri teklifin yerini tutmaz: hareket gözü yönlendirir, dönüşümü teklif getirir. Bu yüzden animasyonlu sürümü tutmadan önce statik bir sürümle karşılaştırın.

• Dikkat tek bir noktada: Hareket, sayfada gözün ilk yakaladığı şeydir. Hareketli öğeyi butonun yanına koyun; ziyaretçiyi istediğiniz tek eyleme yöneltsin.

• Girişte daha az sürtünme: 1,5 saniyelik bir Lottie döngüsü popup'ı sert bir belirmeden daha yumuşak tanıtır. Ziyaretçi cümlesini bitirir, sonra hareketi fark eder. Girişin kendisini kısa tutun, çünkü ilk saniyeler belirleyici: Popupsmart'ın 2026 kıyaslamasında popup'ı kapatan ziyaretçilerin %71'i bunu popup göründükten sonraki 5 saniye içinde yapıyor, popup potansiyel müşterilerinin %61'i de popup göründükten sonraki 30 saniye içinde gönderiliyor.

• Rakiplerden ayrışma: Ziyaretçi bugün altı statik popup görmüşse sizin animasyonlu popup'ınız yeni gelir. Bu yenilik, ziyaretçi kapatma düğmesine uzanmadan önce size bir an kazandırabilir.

• Mobilde daha iyi performans: Lottie dosyası vektördür; 320px genişlikte GIF'ten daha net görünür ve basit bir döngü, aynı hareketin GIF'inden genellikle çok daha hafiftir.

• Marka kişiliği: Oyuncu bir zıplama, sert ve hareketsiz bir kutudan farklı bir şey söyler. Hareket de marka sesinizin bir parçasıdır.

Popupsmart ile Animasyonlu Popup Nasıl Oluşturulur?

Popupsmart'ta animasyonlu popup oluşturmak için bir kampanya başlatın, hedef ve şablon seçin, bir Lottie öğesi ekleyin, animasyon dosyanızı yükleyin, ardından önizleyip kaydedin. Popupsmart'ın popup şablonları arasında birkaç dakikada düzenleyebileceğiniz hazır animasyonlu popup'lar var. Tamamen size özel bir görünüm için kendi Lottie JSON dosyanızı ekleyebilirsiniz. Aşağıdaki beş adım bu özel yolu anlatıyor.

1. Yeni bir kampanya başlatın. Popupsmart kontrol panelini açın ve sağ üst köşedeki mavi + Yeni Kampanya butonuna tıklayın.

Popupsmart kontrol panelinden yeni bir kampanya başlatma

2. Kampanyanıza ad verin ve alan adınızı bağlayın. Açılan pencerede kampanyanıza "animasyonlu popup" gibi anlaşılır bir ad verin ve açılır menüden alan adını seçin. Kaydet'e tıklayın. Adlandırma sandığınızdan önemlidir: üç ay sonra "kampanya 47" bir şey ifade etmez, "anasayfa çıkış animasyonlu" eder.

Kampanyaya ad verme ve alan adı bağlama

3. Bir iş hedefi ve şablon seçin. Sol kenar çubuğunda "Ürünleri ve Teklifleri Tanıtın" ve "E-posta Listenizi Büyütün" gibi hedefler var. Kampanyanıza uyanı seçin; bu örnekte Ürünleri ve Teklifleri Tanıtın'ı kullanıyorum. Popupsmart şablonları bu hedefe göre filtreler. Bu örnek için Cross-Sell Customer Favorites şablonunu seçtim.

Kenar çubuğundan bir iş hedefi seçme

Seçilen hedefe uyan bir şablon seçme

4. Popup'ı düzenleyin ve Lottie öğesini ekleyin. Artık görsel editördesiniz. Metni düzenleyin, görselleri değiştirin, butonun rengini ayarlayın. Animasyonu eklemek için sol paneldeki İçerik Öğeleri bölümünde aşağı kaydırın ve Lottie'yi seçin. Öğeyi başlığın yanına veya harekete geçirici mesajın üstüne bırakın. Lottie bir görsel gibi davranır; şablonda animasyonu koymak istediğiniz yerde zaten bir görsel varsa önce onu silin.

Lottie öğesini popup düzenine ekleme

5. Animasyonunuzu yükleyin ve ince ayar yapın. Lottie öğesine tıkladığınızda JSON'unuzu bırakın veya göz atın seçeneğini göreceksiniz. LottieFiles'tan veya After Effects'ten bir Lottie dosyası yükleyin; bu örnekte bir hamburger animasyonu kullandım. Boyutu, konumu, otomatik oynatmayı ve döngüyü ayarlayın. Sağ üstteki Önizleme'ye, ardından Kaydet'e tıklayın. Popup'ın tüm arka planını canlandırmak isterseniz Stil'i, sonra Gövde Stili'ni açın ve oradaki Lottie animasyonunu etkinleştirin. Popup'ın açılış efektini de Gövde Stili'nden seçersiniz. Yardım merkezindeki popup'a Lottie animasyonu ekleme rehberi her ekranı gösteriyor.

Lottie JSON dosyasını popup'a yükleme

Bitmiş animasyonlu popup'ınız böyle görünür:

Lottie hamburger döngüsüyle bitmiş animasyonlu popup

İpucu: İlk Lottie dosyanızı 200KB'ın altında tutun ve 24fps'de oynatın. Popup'ın içinde küçük bir vektör döngüsü yeterlidir; daha ağır her şey mobilde sayfa hızını düşürür. Yayınlamadan önce sayfayı gerçek bir telefonda kontrol edin.

Animasyonlu Popup’ların 10 Mükemmel Örneği

Bu 10 örneği Popupsmart'ın şablon kütüphanesinden seçtim, çünkü her biri farklı bir hareket ilkesini öğretiyor. Bazıları ürünü doğrudan canlandırıyor, bazıları soyut süslemeler kullanıyor. Her örneğin altındaki çıkarımı okuyun: ilke, tasarımdan daha uzağa taşınır.

1. Abonelik Popup'ı: Samimi Bir E-posta Daveti

Döngüdeki bir karakter illüstrasyonuyla abonelik popup'ı

Neden iyi: Tek alanlı bir e-posta formu, telefonuna bakan bir kadının döngüdeki illüstrasyonunun yanında duruyor. Hareket sakin (sandalyede yavaş bir sallanma), titrek değil; illüstrasyonun bakışı da giriş alanına dönük. Bu, dikkati eyleme çeken klasik bir kullanıcı deneyimi hilesi.

Neden işe yarıyor: Karakter illüstrasyonları bir "sosyal varlık" etkisi yaratır: tanıdık bir insan figürü form doldurmayı daha az alışveriş gibi hissettirir. Buna bakış yönü eklenince yönlendirmeyi illüstrasyon yapar.

Çıkarım: Popup'ınızda bir karakter illüstrasyonu varsa bakışının harekete geçirici mesaja veya giriş alanına döndüğünden emin olun. Boşa giden bir yön işareti, boşa giden bir dönüşüm fırsatıdır.

2. Noel İndirimi Popup'ı: Hareketle Sezon Havası

Sallanan bir yılbaşı süsüyle Noel popup'ı

Neden iyi: Sallanan kırmızı bir süs popup'ı taşıyor, kalın bir "Şimdi Alışveriş Yap" butonu da indirim başlığının altında duruyor. Hareket kısa, şenlikli ve Kasım-Aralık dönemine uygun.

Neden işe yarıyor: Sezona özgü hareket, ziyaretçilerin zaten içinde olduğu havayı yansıtır. Noel döneminde alışveriş yapanlar siteleri "bayram modunda" gezer; hafifçe sallanan kar tanesi veya süsler onların temposuna uyar. Kesinti gibi değil, sezonun bir parçası gibi hissettirir.

Çıkarım: Bir kez bir bayram popup kütüphanesi kurun ve yıllar boyunca yeniden kullanın. Teklif metnini değiştirin, animasyonu tutun: tasarım zamanı kazanırsınız, geri dönen ziyaretçiler de aynı hareketi görür.

3. Köpekli Çıkış Niyeti Popup'ı: Samimi Bir Durdurucu

Kahve içen bir köpek illüstrasyonuyla çıkış niyeti popup'ı

Neden iyi: Kahve içen köpek illüstrasyonu, araya giren bir anı insancıllaştırıyor. İndirim başlığı büyük harflerle "GİTME!" demiyor, samimi bir yazıyla "Bekleyin!" diyor. Yumuşak hareket, yumuşak metin, güçlü teklif.

Neden işe yarıyor: Çıkış niyeti popup'larının doğasında bir sürtünme var. Sıcak bir illüstrasyonu küçük bir hareketle birleştirmek tehdit tepkisini azaltır: okuyan kişi "yine bir popup"tan önce "sevimli hayvan"ı görür, kapatma refleksi de o kadar hızlı çalışmaz. Yine de tetikleyicinin kampanyayı tek başına taşımasını beklemeyin. Popupsmart'ın 2026 kıyaslamasında çıkış niyeti istatistiksel olarak güvenilir bir üstünlük göstermiyor: en hassas çıkış niyeti ayarındaki popup'lar, çıkış niyeti olmayanlara karşı %1,10'a %0,78 dönüştürdü (medyan kampanya); bu fark tesadüf olabilir. Çıkış niyeti popup'ları işe yarıyor mu analizimiz bu tetikleyicinin ne zaman hâlâ kullanılmaya değer olduğunu anlatıyor.

Çıkarım: Çıkış popup'larınızı sert metinler yerine karakter illüstrasyonlarıyla yumuşatın. Sevimli bir maskotun 200KB'lık Lottie dosyası, bağıran kırmızı bir "BEKLE" bandından daha iyi bir tercihtir.

4. İndirim Kodu Popup'ı: Ürünlerden Bir Ön İzleme

Telefonda ürünlerin kaydığı bir indirim popup'ı

Neden iyi: Lottie, bir telefonda kayan kıyafetleri gösteriyor: popup'ın içinde küçük bir ürün vitrini. İndirim kodu hemen yanında; ziyaretçi neyi alabileceğini ve almanın ödülünü tek karede görüyor.

Neden işe yarıyor: İndirim popup'larının çoğu "bir şeyde" %10 indirim sunar. Bu popup, "zaten baktığınız şu ürünlerde" %10 indirim sunuyor. Soyuttan somuta geçmek, ziyaretçiye kodu istemesi için bir neden verir. Kodun kendisi de önemli: Popupsmart'ın 2026 kıyaslamasında indirim kodu sunan kayıt popup'ları %1,46 dönüştürüyor; kod sunmayan kayıt popup'larında bu oran %0,75.

Çıkarım: En çok satan üç ürününüzün silüetini popup animasyonuna taşıyın. Sadece bir kod sallamayın; kodun ne aldırdığını gösterin.

5. Müşteri Geri Bildirimi Popup'ı: Anket Engelini Düşürmek

Karakterlerin puan çubuğuna yıldız yerleştirdiği bir geri bildirim popup'ı

Neden iyi: Üç illüstrasyon karakteri bir puan çubuğuna yıldızları tek tek yerleştiriyor. Hareket, ziyaretçiden istediğiniz eylemi gösteriyor: hem bir öğretici hem bir davet. "Lütfen anketimizi doldurmak için 5 dakikanızı ayırın" yok, sadece hareketli yıldızlar ve kısa bir soru var.

Neden işe yarıyor: Anketlerin katılım sorunu var, çünkü maliyeti belirsiz. Animasyon "bu ne kadar sürer?" sorusunu kelimesiz yanıtlıyor: sadece yıldızlar, sadece tek tıklama.

Çıkarım: Popup'ınız alışılmadık bir eylem istiyorsa eylemin kendisini canlandırın. Popup'ta göstermek, anlatmaktan iyidir.

6. Bombalı Kara Cuma Popup'ı: Kalıbı Kıran Tasarım

Tik tak eden saatli bomba ile sıra dışı bir Kara Cuma popup'ı

Neden iyi: Kadranı tik tak eden çizgi film bombası. Tuhaf, beklenmedik ve alışverişle hiçbir ilgisi yok; amaç da tam olarak bu. Kasım sonunda ziyaretçiler düzinelerce Kara Cuma popup'ı görmüş oluyor. Sizinki diğerlerine hiç benzememeli.

Neden işe yarıyor: Kalıp kırmak, dikkatin temel ilkelerinden biridir. Beyin beklenen şeyi filtreler, tuhaf olanı büyütür. Kara Cuma popup'ında bir bomba "bu da ne?" dedirtir ve o yarım saniyelik duraksama, kapatma refleksi devreye girmeden teklifi okutmaya yeter.

Çıkarım: Gürültülü indirim haftalarında tuhaf olana oynayın. Rakiplerinize benzerseniz görmezden gelinirsiniz. Alışverişle ilgisi olmayan bir animasyon metaforu seçin.

7. Instagram Takip Popup'ı: Kanca Olarak Logo

Atan bir marka logosuyla Instagram takip popup'ı

Neden iyi: Rengi değişen, atan bir Instagram logosu ortada duruyor; ana buton "Sayfamızı Ziyaret Edin". Logo animasyonu platformun renk geçişini kullanıyor: anında tanınıyor, ziyaretçinin nereye gideceğini açıklamaya gerek kalmıyor.

Neden işe yarıyor: Sosyal medya takip popup'ları, ziyaretçiden bilinmeyen bir yere bağlanmasını istediğinde zayıf kalır. Platformun kendi logosunu canlandırmak zihinsel yükü azaltır: ziyaretçi Instagram'ı görür, Instagram'ı tanır, Instagram hakkında karar verir.

Çıkarım: Trafiği güçlü marka tanınırlığı olan bir platforma yönlendiriyorsanız teklif metninizi değil, platformun logosunu canlandırın. İkna işini marka tanınırlığı yapar.

8. Çok Kanallı Sosyal Medya Popup'ı: "Takip Et" Tabelası

"Takip Et" tabelası animasyonlu çok kanallı sosyal medya popup'ı

Neden iyi: Üzerinde "Takip Et" yazan pembe, hareketli bir tabela üç platform butonunun üstünde duruyor. Tabela hafifçe sallanıyor. Animasyon popup'ı tek bir fiille etiketliyor; hızlı göz gezdiren bir ziyaretçi isteği bir saniyeden kısa sürede anlıyor.

Neden işe yarıyor: Çok kanallı takip popup'ları çoğu zaman seçim felcinden ölür: üç platform, üç karar. Hareketli "Takip Et" tabelası popup'ı üç seçenekli tek bir karar olarak yeniden çerçeveler; bu da yarışan üç harekete geçirici mesajdan daha kolay uygulanır.

Çıkarım: Birden fazla platformda takip istiyorsanız platformları değil, fiili canlandırın. "Takip Et" en dikkat çekici öğe olsun.

9. Geri Sayımlı Kara Cuma Popup'ı: Gözle Görülen Aciliyet

Hareketli Kara Cuma yazısıyla geri sayım sayaçlı popup

Neden iyi: "Kara Cuma" başlığı hafifçe atarken altında gerçek bir geri sayım sayacı işliyor. İkna işini animasyon değil sayaç yapıyor, ama hareketli başlık gözü sayacın fark edilmesine yetecek kadar popup'ta tutuyor.

Neden işe yarıyor: Geri sayım sayaçları, dönüşüm tasarımında bilinen bir aciliyet aracıdır. Ayrı bir hareket öğesiyle birleştirildiğinde aynı teklife yönelen iki dikkat tetikleyicisi elde edersiniz. Daha fazlası için geri sayım sayacı popup örnekleri yazımız beş örneği ve nasıl kurulacağını anlatıyor.

Çıkarım: Hareket türlerini yalnızca zamana bağlı bir teklif gerektirdiğinde üst üste koyun. Bu tekniği her salı için değil, gerçek son tarihler için saklayın.

10. Minimalist Animasyonlu Popup: Az Hareketin Kazandığı Yer

Neden iyi: Bazen en iyi animasyonlu popup'ta neredeyse hiç animasyon yoktur. Tek bir vurgu (belirerek gelen bir başlık, butonda ince bir üzerine gelme efekti, yavaş dönen bir simge), sayfanın içeriğiyle yarışmadan tam bir Lottie'nin yaptığı her şeyi yapar.

Neden işe yarıyor: Yoğun animasyon "indirim mağazası" der, hafif animasyon "premium". Lüks, B2B SaaS ve editoryal markalarda harekete geçirici mesajdaki 200ms'lik yumuşak bir geçiş, döngüdeki bir maskottan daha çok güven verir.

Çıkarım: Animasyonun yoğunluğunu markanızın konumuna göre ayarlayın. Kitlesel e-ticaret cesur olabilir; SaaS ve üst segment markalar hareketi tek bir öğede, bir saniyenin altındaki bir döngüde tutmalı.

Lottie Animasyonlu Popup’lar için En İyi Uygulamalar

Animasyonlu popup için en iyi uygulamalar altı kurala iner: hareketi mesaja uydurun, dosyaları hafif tutun, markanıza uyun, hareketi harekete geçirici mesaja yöneltin, önce mobilde test edin ve doğru anda tetikleyin. Herhangi bir animasyonlu popup yayına girmeden önce altısını da kontrol edin. Görüntüleme ve dönüşüm sorunlarının çoğu bunlardan birinin atlanmasından çıkar.

Animasyonlu popup'lar için altı en iyi uygulama

1. İlgili animasyonları kullanın. Lottie animasyonlarını mesajınıza veya hedefinize uygun şekilde seçin. İndirim popup'ı için bir alışveriş sepeti döngüsü, bülten kaydı için atan bir gelen kutusu simgesi. Animasyon sunduğunuz şeyi yansıtmalı, onunla çelişmemeli. Geri bildirim anketinde dönen bir logo sadece gürültüdür.

2. Dosya boyutlarını hafif tutun. Basit bir Lottie JSON, aynı döngünün GIF'inden genellikle çok daha küçüktür, çünkü GIF her kareyi piksel olarak saklar. 2 saniyeden uzun her hareket için Lottie kullanın. Ağır bir popup, sayfayı yavaşlatarak bütün tasarım emeğinizi boşa çıkarır.

3. Marka tarzınıza uygun olsun. Lüks bir marka yavaş, yumuşak geçişler ister. Bir teknoloji girişimi oyuncu zıplamalarla idare edebilir. Animasyon kütüphanesini popup'tan önce seçin, sonra değil.

4. Harekete geçirici mesajı (CTA) vurgulayın. Animasyonunuz butonun karşı tarafındaysa ziyaretçinin gözü aradaki boşluğu kapatmaz. Hareketi CTA'nın yanına koyun veya animasyondan eyleme işaret eden bir yön öğesi kullanın.

5. Önce mobilde test edin. 27 inçlik bir monitörde harika görünen popup, 360px'lik bir telefonda kırpılabilir veya takılabilir. Önce mobili kurun, sonra büyütün. Popup UX tasarımınız 320px genişlikte dağılıyorsa masaüstündeki özen bir işe yaramaz: Popupsmart'ın 2026 kıyaslamasında popup gösterimlerinin %63'ü mobilde gerçekleşiyor. Mobil popup rehberimiz boyut ve yerleşimi anlatıyor.

6. Animasyonları doğru zamanlayın ve tetikleyin. Sayfa yüklenir yüklenmez açmayın. Kaydırma derinliği (%50), sayfada geçen süre veya çıkış niyeti kullanın. Animasyon dikkat çalar; ziyaretçinin vermeye hazır olduğundan emin olun. Tam bekleme süresi sanıldığı kadar önemli değil: Popupsmart'ın 2026 kıyaslamasında gecikme süresinin kendisi (0-5 saniyeye karşı 21-60 saniye) dönüşümde ölçülebilir bir fark yaratmıyor. Popup zamanlaması rehberi daha ayrıntılı anlatıyor.

Popup animasyonu nasıl erişilebilir yapılır?

Erişilebilir bir animasyonlu popup, ziyaretçinin hareketi kapatmasına izin verir, asla yanıp sönmez ve kendiliğinden durur. Bazı insanlar ekrandaki hareketten başı dönecek veya midesi bulanacak kadar etkilenir. W3C'nin Web İçeriği Erişilebilirlik Yönergeleri (WCAG 2.2) popup'lara doğrudan uyan üç kural koyar:

Pratik araç, prefers-reduced-motion CSS medya özelliği. MDN'in prefers-reduced-motion referansı bunu, kullanıcının cihazında gereksiz hareketi en aza indiren bir ayarı açıp açmadığını algılamanın yolu olarak tanımlıyor: macOS ve iOS'ta Hareketi Azalt, Android'de Animasyonları kaldır, Windows 11'de Animasyon efektleri. MDN bu özelliği Baseline olarak listeliyor; Ocak 2020'den beri tüm tarayıcılarda kullanılabiliyor.

Azaltılmış hareket, hiç animasyon olmadan bir anda açılan bir popup anlamına gelmek zorunda değil. W3C'nin Understanding SC 2.3.3 belgesi, bir öğenin algılanan boyutunu, şeklini ve konumunu değiştirmeyen opaklık değişikliklerini hareket animasyonu saymıyor. Yani popup'ınızı kendiniz kodluyorsanız, ziyaretçi daha az hareket istediğinde kayma veya büyüme yerine kısa bir solma efekti kullanın; aşağıdaki CSS örneği de böyle çalışıyor.

Aynı fikir Lottie dosyası için de geçerli: azaltılmış hareket modunda ilk kareyi gösterin ve otomatik oynatmayın. Ne kurarsanız kurun, kapatma butonu ilk kareden itibaren görünür ve klavyeyle erişilebilir olsun.

CSS ile popup animasyonu nasıl yapılır?

Bir popup'ı CSS ile canlandırmak için onu bir <dialog> öğesine koyun ve animasyonu yalnızca opacity ile transform özelliklerine verin: açılırken 240ms'lik bir belirip yükselme, kapanırken 160ms'lik bir solma ve azaltılmış hareket isteyen ziyaretçiler için sade bir solma efekti. Google'ın web.dev'deki yüksek performanslı CSS animasyonları rehberi, animasyonları bu iki özellikle sınırlamayı öneriyor, çünkü bu ikisi, diğer animasyonlarda takılmaya yol açan düzen (layout) ve boyama (paint) işini atlıyor.

İşe HTML ile başlayın. MDN'in dialog öğesi referansında anlatıldığı gibi, showModal() çağrısı <dialog> öğesini arka plan katmanıyla (backdrop) birlikte sayfanın üstünde açar, arkasındaki her şeyi etkileşime kapatır ve Escape tuşuyla kapatılabilmesini sağlar. MDN, <dialog> öğesini Baseline olarak listeliyor; Mart 2022'den beri tüm tarayıcılarda çalışıyor.

<button type="button" id="open-popup">Join our newsletter</button>

<dialog class="popup" id="popup" aria-labelledby="popup-title">
  <h2 id="popup-title">Get our weekly tips</h2>
  <p>One short email every Monday. Unsubscribe any time.</p>
  <button type="button" class="popup-close">Close</button>
</dialog>

Sonra CSS. Giriş animasyonu [open] durumunda çalışır. Çıkış ise betiğin eklediği bir sınıfa bağlıdır, çünkü kapatılan bir dialog anında gizlenir ve animasyona zaman bırakmaz.

.popup {
  border: 0;
  border-radius: 12px;
  padding: 24px;
  max-width: 420px;
}

.popup::backdrop {
  background: rgb(0 0 0 / 0.5);
}

/* Opening: fade in, rise and grow slightly */
.popup[open] {
  animation: popup-in 240ms cubic-bezier(0.23, 1, 0.32, 1);
}

.popup[open]::backdrop {
  animation: fade-in 240ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* Closing: the script adds .is-closing, waits, then closes */
.popup.is-closing {
  animation: popup-out 160ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.popup.is-closing::backdrop {
  animation: fade-out 160ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes popup-in {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
}

@keyframes popup-out {
  to { opacity: 0; transform: translateY(8px) scale(0.96); }
}

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes fade-out {
  to { opacity: 0; }
}

/* Reduced motion: keep a short fade, drop the movement */
@media (prefers-reduced-motion: reduce) {
  .popup[open] { animation-name: fade-in; }
  .popup.is-closing { animation-name: fade-out; }
}

Son olarak birkaç satır JavaScript popup'ı açar, kapatmadan önce çıkış animasyonunu oynatır ve Escape tuşunu da aynı çıkıştan geçirir:

const popup = document.getElementById("popup");

document.getElementById("open-popup").addEventListener("click", () => {
  popup.showModal();
});

function closePopup() {
  popup.classList.add("is-closing");
  // Wait for the closing animation to finish, then close the dialog
  const running = popup.getAnimations().map((animation) => animation.finished);
  Promise.allSettled(running).then(() => {
    popup.close();
    popup.classList.remove("is-closing");
  });
}

popup.querySelector(".popup-close").addEventListener("click", closePopup);

// The Escape key fires "cancel": play the same closing animation
popup.addEventListener("cancel", (event) => {
  event.preventDefault();
  closePopup();
});

Parçalar şöyle birleşiyor:

• Çıkış, girişten kısa. Popup'ı kapatan ziyaretçi kararını çoktan vermiştir; ona popup'ın gidişini izletmeyin.
• getAnimations(), dialog üzerinde hâlâ çalışan animasyonları listeler. Böylece betik dialog'u çıkış biter bitmez kapatır, çalışan bir animasyon yoksa hiç beklemez.
• Azaltılmış hareket açıkken medya sorgusu iki animasyonun yerine de düz bir solma koyar. MDN'in kendi prefers-reduced-motion örneği de büyüyen bir animasyonu aynı şekilde yumuşak bir geçişe (dissolve) indiriyor.
• Hiçbir yerde transition: all yok. Olsaydı, değişen her düzen özelliğini de canlandırırdı. web.dev rehberinin uyardığı yavaş animasyon türü de tam olarak bu.

Daha yaylı bir pop out animasyonu için girişi scale(0.9) değerinden başlatın ve hedefini biraz aşan bir eğri kullanın, örneğin cubic-bezier(0.34, 1.56, 0.64, 1). Aynı modalı Bootstrap, Tailwind veya jQuery ile kurmak için modal popup oluşturma rehberimize bakın.

Yukarıdaki kod 9 Ekim 2026'da arayüzsüz (headless) Chrome'da yapılan bir kontrolden geçti. Popup açılıyor, hem butonla hem Escape tuşuyla kapanıyor ve azaltılmış hareket açıkken solma efektine geçiyor.

Animasyonlu popup'larda kaçınılması gereken hatalar

Animasyonlu popup'larda en sık görülen hatalar birden fazla animasyonu üst üste koymak, sonsuz döngü, sayfa yüklenirken tetiklemek, kapatma butonunu engellemek ve hareketi dönüşüm aracı sanmaktır. Her biri fark edildiğinde hızla düzeltilir.

• Birden fazla animasyonla aşırı yüklemek: Popup başına bir animasyonlu öğe. İkincisi dikkat için yarışır. Bir Lottie döngünüz, atan bir butonunuz ve bir geri sayım sayacınız varsa birini hareketli bırakın, diğerlerini dondurun.

• Hiç durmayan döngüler: Sonsuza kadar oynayan 6 saniyelik bir Lottie arka plan gürültüsüne dönüşür. Animasyonu 2-3 kez oynatıp son karede dondurun. WCAG 2.2 Başarı Ölçütü 2.2.2'ye (Düzey A) göre kendiliğinden başlayan, beş saniyeden uzun süren ve başka içerikle birlikte oynayan hareket için duraklatma, durdurma veya gizleme yolu olmalı.

• Sayfa yüklenirken tetiklemek: Hemen çıkma oranınızı yakmanın en hızlı yolu; popup ve animasyonu, ziyaretçinin okumaya geldiği sayfayla yarışır. Ziyaretçiye önce birkaç saniyelik içerik verin veya kaydırma derinliği ya da çıkış niyeti kullanın. Popupsmart'ın 2026 kıyaslamasında görünmeden önce bekleyen popup'lar, sayfa yüklenir yüklenmez gösterilenlere karşı %0,83'e %0,61 dönüştürüyor (medyan kampanya); yön verinin her yılında aynı kalıyor ama fark istatistiksel olarak güvenilir değil, bu yüzden bir kural değil, eğilim olarak okuyun.

• Kapatma butonunu engelleyen animasyonlar: X her zaman görünür olmalı; hareketli bir öğenin altında kalmamalı, gecikmemeli. WCAG'e uygun kapatma davranışı kesin bir gerekliliktir.

• Animasyonu dönüşüm aracı sanmak: Hareket çeker, teklif dönüştürür. Zayıf bir teklifin etrafındaki güzel bir Lottie yine de zayıf dönüştürür. Önce teklifi düzeltin, sonra canlandırın.

Popup tasarımında en iyi uygulamalar yazımız, sektörler arasında işe yarayan düzen kalıpları dahil yapısal tuzakları daha ayrıntılı ele alıyor.

Animasyonlu popup'ların başarısını ölçmek

Animasyonlu bir popup'ı ölçmek için beş sayıyı takip edin: dönüşüm oranı, kapatma oranı, dönüşüm süresi, mobil ve masaüstü dağılımı ve sayfa hızı. Ölçmediğiniz şeyi geliştiremezsiniz. "Etkileşim" tek başına yetmez; en adil test, aynı popup'ı animasyonlu ve animasyonsuz çalıştırmaktır.

• Dönüşüm oranı (birincil): Form gönderimlerinin popup gösterimlerine bölümü. Beklentinizi gerçek veriye göre ayarlayın: Popupsmart'ın 2026 popup dönüşüm kıyaslamasına göre, e-posta veya telefon numarası isteyen 3.034 Popupsmart popup'ında (Ocak 2024 - Eylül 2026, her biri en az 1.000 gösterim ve 14 aktif günle) medyan popup, gösterimlerinin %0,83'ünü potansiyel müşteriye dönüştürüyor; en iyi %25 %1,96'ya, en iyi %10 %3,87'ye ulaşıyor. Medyanın çok altındaysanız çözüm animasyon değil; teklif veya zamanlama bozuk.

• Kapatma oranı: X'e basıp dönüşmeyen ziyaretçiler. Yüksek kapatma oranı ile düşük dönüşüm, yanlış tetikleyici veya yanlış kitle demektir. Düşük kapatma oranı ile düşük dönüşüm, sıkıcı bir teklif demektir. Popupsmart'ın 2026 kıyaslamasında popup gösterimlerinin %40,5'i ziyaretçinin popup'ı kapatmasıyla bitiyor (tüm gösterimler toplu, Şubat 2025 - Eylül 2026, kapatma takibi başladığından beri).

• Dönüşüm süresi: Popup'ın görünmesiyle tıklama arasındaki saniyeler. Potansiyel müşterilerin çoğu erken gelir; ziyaretçiyi yazmadan önce bekleten bir giriş animasyonu size kaybettirir.

• Mobil ve masaüstü dağılımı: Popupsmart'ın 2026 kıyaslamasında mobil ziyaretçiler popup'larda %1,02 dönüşüyor, masaüstünde bu oran %0,57; tıklamada %2,99'a karşı %1,34 (medyan kampanya). Popup'ınız telefonda masaüstünden kötüyse önce animasyonun küçük ekrandaki ağırlığını ve boyutunu kontrol edin.

• Sayfa hızına etkisi: Sayfanın Core Web Vitals değerlerini (LCP, INP ve CLS) popup açıkken ve kapalıyken karşılaştırın. Animasyon dosyası, popup'ın görünebildiği her sayfada indirilir; ağır bir dosya kimse popup'ı görmese bile size maliyet çıkarır.

CSS, Lottie mi GIF mi: hangi format?

Popup'ın girişi için CSS, hareket etmeye devam eden bir illüstrasyon için Lottie, gerçek görüntü için de yalnızca GIF veya video kullanın. Her formatın en iyi yaptığı bir iş var:

Lottie dosyaları Adobe After Effects'ten ücretsiz Bodymovin eklentisiyle ya da LottieFiles gibi kütüphanelerden gelir. Popup içinde video için video popup'lar rehberimize bakın.

Animasyonlu popup oluşturmak için araçlar ve kaynaklar

İlk animasyonlu popup'ınızı yayınlamak için bir hareket tasarımcısına ihtiyacınız yok. Lottie destekli bir popup oluşturucu ve bir animasyon kütüphanesi çoğu kampanyaya yeter. Sıfırdan başlayan pazarlamacılar için kısa bir araç listesi:

• Popupsmart: Sürükle-bırak editör, yerleşik Lottie desteği, hazır animasyonlu şablonlar ve çıkış niyeti, kaydırma, süre ve tıklama tetikleyicileri. Lottie bir öğe olarak da popup'ın tüm arka planı olarak da kullanılabilir.

• LottieFiles: Ücretsiz ve ücretli Lottie animasyonlarından oluşan geniş bir kütüphane. JSON'u indirin, doğrudan Popupsmart'a ekleyin.

• IconScout: Lottie animasyonları, GIF'ler ve PNG simgeler tek kütüphanede; birbirine uyan bir animasyon ve simge seti gerektiğinde işe yarar.

• Adobe After Effects + Bodymovin: Özel Lottie üretimi için. Bodymovin, animasyonunuzu JSON olarak dışa aktaran ücretsiz bir After Effects eklentisi.

• SVGator: After Effects öğrenmek istemiyorsanız tarayıcıda çalışan bir animasyon aracı. Temiz SVG veya Lottie dışa aktarır.

Araçlarınızı hâlâ seçiyorsanız popup türleri ve kullanım alanları yazımız ve popup mesajı örnekleri derlememiz, karar vermeden önce aracı hedefe eşlemenize yardım eder.

İlk animasyonlu popup'ınızı bu hafta yayınlayın

Statik popup'lar kolayca görmezden gelinir. Yukarıdaki kurallarla kurulan animasyonlu popup'lar, hareket teklife hizmet ettiğinde ikinci bir bakış kazanır. En büyük kazanç üç adımdan gelir: animasyonu mesaja uydurun, Lottie dosyasını 200KB'ın altında tutun ve sayfa yüklenirken değil, kaydırmada veya çıkışta tetikleyin. Ardından azaltılmış hareket ayarına saygı gösterin ve animasyonlu sürümü statik bir sürümle karşılaştırın.

Bu rehberden bir sonraki kampanyanıza uyan bir örnek seçin, ona uyan Popupsmart şablonunu alın, LottieFiles'tan bir Lottie ekleyin ve hafta bitmeden yayınlayın. Canlı bir kampanya, bir ay daha plan yapmaktan fazlasını öğretir.

Kurmadan önce popup temellerini tazelemek isterseniz welcome popup rehberimiz ilk izlenim kampanyaları için bu yazıyla iyi bir ikili oluşturuyor.

Sıkça Sorulan Sorular

Popup animasyon efektleri nelerdir?

Popup animasyon efektleri, popup'a uygulanan hareketlerdir: belirerek açılma, kayarak gelme, büyüyerek açılma, döngüdeki Lottie animasyonları, zıplama ve nabız efektleri. İyi bir efekt girişte 1 saniyenin altında kalır, doğrusal hareket yerine yumuşak geçiş eğrileri kullanır ve dikkat dağıtmaması için birkaç döngüden sonra durur. Ziyaretçinin cihazı azaltılmış hareket istediğinde de kapanır.

Popup'a CSS ile nasıl animasyon eklenir?

Popup'ı bir dialog öğesine koyun ve yalnızca opacity ile transform özelliklerini canlandırın. [open] durumunda kısa bir giriş için @keyframes kullanın (opacity 0'dan 1'e, scale(0.96)'dan scale(1)'e), betik close() çağırmadan önce tersini oynatan bir kapanış sınıfı ekleyin ve ikisini de sade bir solma efektiyle değiştiren bir @media (prefers-reduced-motion: reduce) kuralı yazın. transition: all kullanmayın; değişen her düzen özelliğini de canlandırır.

Pop out animasyonu nedir?

Pop out animasyonu, bir öğeyi hızla büyüterek size doğru sıçrıyormuş gibi gösterir; öğe yerine oturmadan önce çoğu zaman hedefini biraz aşar. Bir kartta veya butonda genellikle üzerine gelindiğinde oynar. Popup'ta ise girişin kendisidir: opacity 0'dan 1'e çıkarken transform scale(0.9)'dan scale(1)'e geçer. Büyümeyi küçük tutun ve azaltılmış hareketi tercih eden ziyaretçiler için sade bir solma efektine geçin.

Animasyonlu popup oluşturucu nasıl çalışır?

Popupsmart gibi bir animasyonlu popup oluşturucu size görsel bir editör verir: düzeni kurarsınız, animasyon öğelerini (Lottie, GIF veya hazır hareket ayarları) eklersiniz, tetikleyicileri belirler ve tek bir JavaScript kodu ile yayınlarsınız. Animasyonlu popup üreticisi de şablonlardan veya sürükle-bırak öğelerinden yayına hazır animasyonlu popup'lar üreten kodsuz bir araçtır. Şablonu seçin, metni ve animasyonu düzenleyin, hedef kitleyi belirleyin, yayınlayın.

Ücretsiz animasyonlu popup şablonlarını nerede bulabilirim?

Popupsmart, editörün içinde hedefe göre düzenlenmiş hazır animasyonlu şablonlar sunar. Kendi popup'ınıza ekleyeceğiniz dosyalar için LottieFiles ve IconScout binlerce ücretsiz Lottie JSON dosyası sunar. Popup'ınızın mobilde hafif kalması için 100KB'ın altındaki dosyaları seçin; popup gösterimlerinin çoğu mobilde gerçekleşiyor.

Animasyonlu popup'lar kullanıcı deneyimi için iyi mi kötü mü?

Animasyonlu popup'lar doğru anda tetiklendiğinde, cihaza göre boyutlandırıldığında ve teklifi destekleyen bir hareket kullandığında kullanıcı deneyimi için iyidir. Sayfa yüklenir yüklenmez açıldığında, içeriği kapattığında, yüksek sesle otomatik oynadığında, yanıp söndüğünde veya dikkati sayfanın içeriğinden çektiğinde kötüleşir. Hareketi varsayılan değil, bir araç olarak kullanın ve azaltılmış hareket ayarına saygı gösterin.