Yalnızca CSS ile Scroll-driven Animation Uygulama Rehberi

• Ayrı bir JS ya da kütüphane olmadan, yalnızca CSS ile kaydırma bağlantılı animasyonlar uygulanabilir
• animation-timeline: scroll() / view() gibi CSS özellikleriyle, kaydırma konumu veya viewport'a giriş gibi durumlara göre animasyon ilerletilebilir
• animation-range özelliğiyle animasyonun viewport içinde hangi aralıkta başlayıp biteceği ayrıntılı biçimde ayarlanabilir
• Harekete duyarlı kullanıcılar için prefers-reduced-motion medya sorgusunun kullanılması önerilir
• Safari 26 beta ile birlikte desteklenmeye başladı; böylece CSS tabanlı kaydırma animasyonlarının kullanım alanı önemli ölçüde genişledi

---

Kaydırma tabanlı animasyonun 3 öğesi

• Target: Animasyonun uygulanacağı hedef öğe (ör. ilerleme çubuğu, görsel vb.)
• Keyframes: Kaydırmaya göre hangi değişimlerin olacağını tanımlar (mevcut CSS @keyframes ile aynıdır)
• Timeline: Animasyonun ne zaman ve nasıl ilerleyeceğini belirler (zaman tabanlı değil, kaydırma/görünüm tabanlı)

CSS'te Timeline

• Mevcut CSS animasyonları varsayılan olarak document timeline (zaman tabanlı) kullanır
• animation-timeline özelliğinin eklenmesiyle (CSS Animations Level 2, 2023), zaman dışında kaydırma, viewport'a giriş gibi farklı ölçütlere göre de animasyon ilerleyebilir

scroll() timeline

• scroll() timeline'ında animasyon yalnızca kullanıcı kaydırdığında ilerler
• Örnek: Alttaki ilerleme çubuğunun kaydırmaya göre soldan sağa dolması

  footer::after {  
    content: "";  
    height: 1em;  
    width: 100%;  
    background: rgba(254, 178, 16, 1);  
    left: 0;  
    bottom: 0;  
    position: fixed;  
    animation: grow-progress linear;  
    animation-timeline: scroll();  
  }  
  @keyframes grow-progress {  
    from { transform: scaleX(0); }  
    to { transform: scaleX(1); }  
  }  
  

• animation-timeline, düzgün çalışması için animation özelliğinden sonra tanımlanmalıdır

Hareket erişilebilirliği dikkate alma

• Harekete duyarlı kullanıcıları korumak için prefers-reduced-motion medya sorgusunun kullanılması önerilir

  @media not (prefers-reduced-motion) {  
      /* animasyon kodu */  
  }  
  

view() timeline

• view() timeline'ında animasyon, hedef öğe viewport'ta göründüğünde başlar
• Örnek: Kaydırma sırasında görselin sağdan kayarak gelip fade-in olması

  @keyframes slideIn {  
    0% {  
      transform: translateX(100%);  
      opacity: 0;  
    }  
    100% {  
      transform: translateX(0%);  
      opacity: 1;  
    }  
  }  
  img {  
    animation: slideIn;  
    animation-timeline: view();  
  }  
  

animation-range ile ilerleme aralığını kontrol etme

• Varsayılan olarak animation-range, 0% (viewport'a giriş) ile 100% (tam çıkış) arasındadır

• Örnek: Animasyonun yalnızca viewport'un %50'lik kısmına kadar ilerlemesi

  img {  
    animation: slideIn;  
    animation-timeline: view();  
    animation-range: 0% 50%;  
  }  
  

• Kullanıcı deneyimi için uygun range değerlerinin ayarlanması gerekir

• Hareket erişilebilirliği dikkate alınacaksa, prefers-reduced-motion ile birlikte kullanılmalıdır

  @media not (prefers-reduced-motion) {  
    img {  
      animation: slideIn;  
      animation-timeline: view();  
      animation-range: 0% 50%;  
    }  
  }  
  

Gelişmiş kullanım ve sonraki adımlar

• scroll() ve view() birer fonksiyondur; scroller öğesi (varsayılan: nearest) veya eksen (block, inline, x, y) gibi çeşitli seçenekler belirtilebilir
• animation-range, entry / exit gibi seçeneklerle daha incelikli bir UX oluşturulabilir
• Safari 26 beta gibi güncel tarayıcılarda önce destekleniyor; ileride standardizasyonun ve desteğin kademeli olarak genişlemesi bekleniyor

[shakespeare]

Bunu yalnızca animation-timeline ile yapmak mümkünmüş. Gerçekten ilginç!