Chrome 146 sürümüyle birlikte, scroll tetiklemeli animasyonlar (scroll-triggered animations) kullanıma sunuldu. Chrome, bu özelliği destekleyen ilk tarayıcı oldu. Bu yenilik, sayfa kaydırma (scroll) ile tetiklenen animasyonları CSS ile tanımlamayı mümkün kılıyor. Örneğin, bir kare tamamen görünür hale geldiğinde arka planının 300 ms içinde yavaşça görünmesini sağlayabilirsiniz. Bu, scroll-driven animasyonlardan farklı bir yaklaşım sunuyor.
Scroll tetiklemeli animasyonlar, belirli bir scroll eşiği aşıldığında sabit bir süre boyunca çalışan animasyonlardır. JavaScript'teki Intersection Observer API'sine benzer, ancak doğrudan CSS içinde tanımlanabilir. Buna karşılık, scroll-driven animasyonlarda animasyon ilerlemesi scroll ilerlemesiyle senkronize olur ve süre kavramı yoktur. Yani scroll-driven animasyonlar, elemanın ne kadar görünür olduğuna göre animasyonu adım adım oynatırken, scroll tetiklemeli animasyonlar bir eşik geçildiğinde animasyonu başlatır ve belirlenen sürede tamamlar.
Temel bir scroll tetiklemeli animasyon oluşturmak için @keyframes ile animasyon tanımlanır, ardından CSS'de timeline-trigger ve animation-trigger özellikleri kullanılır. Örneğin, bir karenin arka plan rengini değiştirmek için @keyframes fade-bg-in { to { background: currentColor; } } tanımlanır. Ardından .square sınıfına animation: fade-bg-in 300ms; ve timeline-trigger: --trigger view() entry 100% exit 0%; eklenir. Burada entry 100%, elemanın alt kenarının görünüm alanına girdiği anı, exit 0% ise üst kenarın çıktığı anı belirtir. animation-trigger: --trigger play-forwards; ile animasyon tetiklendiğinde ileri yönde oynatılır.
Detaylar ve Etkileri
Animasyonun davranışını kontrol etmek için play-forwards, play-once ve play-backwards gibi anahtar kelimeler kullanılabilir. play-forwards animasyonu her tetiklemede baştan sona oynatırken, play-once yalnızca bir kez oynatır ve tekrarlamaz. play-backwards ise tetikleme sona erdiğinde animasyonu ters yönde oynatır. Ayrıca animation-fill-mode ile animasyon sonunda stillerin korunup korunmayacağı belirlenebilir. Örneğin, forwards değeri animasyon bittiğinde son halini korur. Bu özellikler sayesinde, sayfa kaydırma ile etkileşimli, akıcı ve performanslı animasyonlar oluşturmak mümkün hale geliyor.
