CSS ile kaydırma tetikli animasyonlar geliyor

Bramus

Yayınlanma tarihi: 12 Aralık 2025

2023'te, kaydırma yoluyla animasyonları ileri veya geri sarmanıza olanak tanıyan kaydırmaya dayalı animasyonlar özelliğini kullanıma sunduk. Kaydırmaya dayalı animasyonlarda, kaydırdıkça animasyon ilerlemesi% 0'dan% 100'e çıkar. Kaydırmayı durdurursanız animasyon duraklatılır. Yukarı kaydırırsanız animasyon tersine döner.

Kaydırmaya dayalı animasyonların bir sonraki bölümü 2026'da geliyor. Kaydırma ile tetiklenen animasyonlar Chrome 145'te kullanıma sunulacak. Bunlar, belirli bir kaydırma uzaklığı geçildiğinde tetiklenen zamana dayalı animasyonlardır.

Artık CSS'de bildirimsel olarak yapabileceğiniz için bu tür efektler için IntersectionObserver kullanmanıza gerek yok.

Zaman çizelgesi tetikleyicileri, animasyon tetikleyicileri ve işlemler

Animasyonu tetikleme

CSS'de kaydırma ile tetiklenen bir animasyon ayarlamak için bir öğeye eklenmiş normal bir CSS animasyonuyla başlayın:

animation: unclip 0.35s ease-in-out both;

Bu animasyon, sürücü olarak DocumentTimeline kullanır ve 0,35 saniye sürer. Animasyon, sayfa yüklendikten sonra otomatik olarak tetiklenir. Tetikleyiciyi değiştirmek için yeni animation-trigger CSS özelliğini kullanın:

animation-trigger: --t play-forwards play-backwards;

Burada animasyonun --t tetikleyicisiyle tetiklenmesi ayarlanmıştır. Bu tetikleyici etkinleştirildiğinde animasyonda play-forwards işlemi, tetikleyici devre dışı bırakıldığında ise play-backwards işlemi çağrılır.

Spesifikasyon, işlemlerin tam listesini içerir.

Tetikleyici oluştur

Peki bu --t tetikleyici nedir? --t adlı bir tetikleyici. Özellikle kaydırma tetikli animasyonlar için kaynak olarak Kaydırma İlerlemesi Zaman Çizelgesi veya Görüntüleme İlerlemesi Zaman Çizelgesi kullanan bir "zaman çizelgesi tetikleyicisi"dir.

Zaman çizelgesi tetikleyicisi tanımlamak için timeline-trigger özelliğini (veya ilişkili uzun biçimlerini) kullanın. Örneğin, kaynağı olarak görünüm zaman çizelgesini kullanan --t adlı bir tetikleyici oluşturmak için aşağıdakileri kullanın:

timeline-trigger-name: --t;
timeline-trigger-source: view();

Bu oluşturulan tetikleyici --t, eşleşen öğeyle ilişkili görünüm zaman çizelgesine göre etkinleştirilir ve devre dışı bırakılır. Görüntüleme zaman çizelgesi için varsayılan aralık cover aralığı olduğundan tetikleyici, bu aralığın içinde veya dışında olduğunda da etkinleştirilir ve devre dışı bırakılır.

Tetikleyicinin aralıklarını ayarlama

Tetikleyicinin etkin veya etkin olmaması gereken konumları ayarlamak için tetikleyicide etkinleştirme ve etkin aralıkları belirtin. Aşağıdaki örnekte, etkinleştirme aralığı entry 100% exit 0% olarak ayarlanmıştır. Bu, tetikleyicinin, özne bu aralıkta olduğunda etkinleşeceği anlamına gelir.

timeline-trigger:
  --t
  view()
  entry 100% exit 0%
;

Önceki snippet'te etkin bir aralık belirtilmediği için etkinleştirme aralığı da etkin aralık olarak kullanılır. Bu etkin aralığın dışına çıkıldığında tetikleyici devre dışı bırakılır.

Bu, önceden tanımlanmış animation-trigger ile birleştirildiğinde görsel olarak, konu kaydırma alanına tamamen girdiğinde animasyonun ileriye doğru, kaydırma alanından çıkmak üzereyken ise geriye doğru oynatılmasıyla sonuçlanır.

Farklı etkinleştirme ve etkin aralıklar olabilir. Örneğin:

timeline-trigger:
  --t
  view()
  entry 100% exit 0% / entry 0% exit 100%
;

Burada, konu entry 100% exit 0% aralığında olduğunda tetikleyici etkinleşir. Tetikleyici, entry 0% exit 100% aralığından çıkana kadar etkin kalır.

Bu durum, görsel olarak animasyonun, konu kaydırma alanına girdiğinde ileriye doğru oynatılmasıyla sonuçlanır. Ayrıca, animasyon, konunun kaydırma alanından tamamen çıkmasına kadar etkin kalır.

Tetikleyicinin kapsamını sınırlama

Tetikleyiciler genel olarak görünür. Yani belirli bir ada sahip bir tetikleyiciyi bildiren son eşleşme "kazanır". Bir tetikleyicinin görünürlüğünü sınırlamak için trigger-scope özelliğini kullanın. Bu, anchor-scope kullanımına benzer.

trigger-scope: --t; /* List of dashed idents, or `all` */

Bir tetikleyici bildiren ve birden fazla öğeyle eşleşen bir CSS kuralınız olduğunda trigger-scope kullanmanız gerekir.

Demo

Aşağıdaki demoda, bir form çeşitli tam yükseklik bölümlerine ayrılmıştır. Formun her bölümü görünüme girdiğinde kaydırma ile tetiklenen bir animasyon kullanılarak animasyon hâline getirilir. Kaydırma alanından ayrıldığında animasyonla kaybolur.

Bunun için kaydırma ile tetiklenen animasyon mantığı şöyledir:

@keyframes card {
  from { translate: 0 -50% 0; }
}

@keyframes card-contents {
  from { opacity: 0; height: 0px; }
  to { opacity: 1; height: auto; }
}

.card {
  overflow-y: clip; /* Hide any overflow in the y-axis */

  timeline-trigger:
    --t
    view()
    contain 15% contain 85% / entry 100% exit 0%
  ;
  trigger-scope: --t;

  animation: unclip var(--duration) ease-in-out both;
  animation-trigger: --t play-forwards play-backwards;
}

.card > * {
  interpolate-size: allow-keywords; /* To animate to `height: auto` */

  animation: card-contents var(--duration) ease-in-out both;
  animation-trigger: --t play-forwards play-backwards;
}

Kod, parçalandığında şu şekilde okunur:

• timeline-trigger, --t olarak adlandırılır ve kaynağı, eşleşen öğeyi izleyen bir görünüm zaman çizelgesi olarak ayarlanır.
• Tetikleyicinin etkinleştirme aralığı contain 15% contain 85%'dır. Özne bu aralıkta olduğunda tetikleyici etkin hale gelir.
• Etkinleştirildiğinde tetikleyici, özne entry 100% exit 0%'nın etkin aralığında olduğu sürece etkin kalır.
• unclip animasyonu öğeye eklenir.
• Animasyon, tetikleyici kaynağı olarak --t kullanacak şekilde ayarlanmıştır. Tetikleyici etkin hale geldiğinde animasyon ileri yönde oynatılmaya başlar.
• Tetikleyici devre dışı bırakıldığında (özne etkin aralığın dışına çıktığında) animasyon geriye doğru oynatılır.
• Kartın içeriği de aynı tetikleyici --t kullanılarak animasyonla girip çıkar.

Örnekte, timeline-trigger'ı desteklemeyen tarayıcılar için IntersectionObserver kullanılarak yedekleme yapılıyor.

Daha fazla demo

Kaydırma tetikli animasyonlara doyamıyorsanız aşağıdaki demoları inceleyin:

• Uçarak Gelen Metin
• Canavarlarla tanışın (scrollytelling)
• Dönüşen şekil

Geri bildirim

Bu özelliği daha iyi hale getirmeye devam edebilmemiz için geri bildirimlerinizi bekliyoruz. Geri bildirimde bulunmak için sosyal medyadan bize ulaşabilir veya CSS Çalışma Grubu'nda sorun bildirebilirsiniz.

Bir hatayla karşılaşırsanız Chromium hata bildiriminde bulunarak durumu bize bildirin. Bilinen hataların listesi: Chromium hata izleyicisine bakın.