Web tasar\u0131m\u0131 ve geli\u015ftirme d\u00fcnyas\u0131, kullan\u0131c\u0131 deneyimini zenginle\u015ftiren interaktif \u00f6\u011felere olan talebin artmas\u0131yla s\u00fcrekli evrim ge\u00e7irmektedir. Bu evrimin en heyecan verici y\u00f6nlerinden biri de kayd\u0131rma tabanl\u0131 animasyonlard\u0131r. Geleneksel olarak JavaScript ile y\u00f6netilen bu t\u00fcr animasyonlar, 2026 itibar\u0131yla modern web standartlar\u0131n\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131 haline gelen CSS Scroll Timeline sayesinde art\u0131k \u00e7ok daha performansl\u0131, eri\u015filebilir ve geli\u015ftirici dostu bir \u015fekilde olu\u015fturulabilmektedir. Bu makale, CSS Scroll Timeline’\u0131n derinliklerine inerek, bu g\u00fc\u00e7l\u00fc \u00f6zelli\u011fi nas\u0131l etkin bir \u015fekilde kullanaca\u011f\u0131n\u0131z\u0131 ve web sitelerinize nefes kesen kayd\u0131rma efektleri ekleyece\u011finizi detayl\u0131 bir \u015fekilde a\u00e7\u0131klayacakt\u0131r.<\/p>\n
Web sitelerinde kayd\u0131rma hareketiyle tetiklenen animasyonlar, kullan\u0131c\u0131lar\u0131 etkile\u015fime te\u015fvik eden ve i\u00e7eri\u011fi daha dinamik hale getiren g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Ge\u00e7mi\u015fte bu t\u00fcr efektler genellikle karma\u015f\u0131k JavaScript k\u00fct\u00fcphaneleri ve \u00f6zel kodlarla ger\u00e7ekle\u015ftirilirdi. Ancak bu yakla\u015f\u0131mlar genellikle performans sorunlar\u0131na, geli\u015ftirme zorluklar\u0131na ve taray\u0131c\u0131 uyumlulu\u011fu problemlerine yol a\u00e7abiliyordu.<\/p>\n
JavaScript tabanl\u0131 \u00e7\u00f6z\u00fcmler, kayd\u0131rma olaylar\u0131n\u0131 dinleyerek DOM manip\u00fclasyonlar\u0131 ve stil de\u011fi\u015fiklikleri yapard\u0131. Bu, ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 (main thread) me\u015fgul ederek sayfa ak\u0131c\u0131l\u0131\u011f\u0131n\u0131 olumsuz etkileyebilir, \u00f6zellikle d\u00fc\u015f\u00fck g\u00fc\u00e7l\u00fc cihazlarda tak\u0131lmalara ve k\u00f6t\u00fc bir kullan\u0131c\u0131 deneyimine neden olabilirdi. Ayr\u0131ca, her taray\u0131c\u0131 ve cihaz i\u00e7in farkl\u0131 optimizasyonlar gerektirebiliyordu.<\/p>\n
CSS’in kendi animasyon yetenekleri ( CSS Scroll Timeline, bu bo\u015flu\u011fu doldurarak CSS animasyonlar\u0131n\u0131 do\u011frudan bir kayd\u0131rma konteynerinin veya belirli bir elementin g\u00f6r\u00fcn\u00fcrl\u00fck ilerlemesine ba\u011flama yetene\u011fi sunar. Bu, geli\u015ftiricilerin JavaScript’e ihtiya\u00e7 duymadan, taray\u0131c\u0131 taraf\u0131ndan optimize edilmi\u015f, ak\u0131c\u0131 ve performansl\u0131 kayd\u0131rma tabanl\u0131 animasyonlar olu\u015fturmas\u0131n\u0131 sa\u011flar. Bu devrim niteli\u011findeki \u00f6zellik, web animasyonlar\u0131n\u0131n gelece\u011fini \u015fekillendirmektedir.<\/p>\n 2026 y\u0131l\u0131na gelindi\u011finde, CSS Scroll Timeline, modern web geli\u015ftirmenin ayr\u0131lmaz bir par\u00e7as\u0131 haline gelmi\u015f, t\u00fcm ana taray\u0131c\u0131lar taraf\u0131ndan tam olarak desteklenmekte ve bir\u00e7ok tasar\u0131m sisteminde varsay\u0131lan animasyon mekanizmas\u0131 olarak benimsenmi\u015ftir. Bu, geli\u015ftiricilerin herhangi bir uyumluluk endi\u015fesi duymadan bu \u00f6zelli\u011fi kullanabilece\u011fi anlam\u0131na gelmektedir.<\/p>\n CSS Scroll Timeline, bir animasyonun ilerlemesini sabit bir zaman dilimi yerine, bir kayd\u0131rma konteynerinin kayd\u0131rma pozisyonuna veya bir elementin g\u00f6r\u00fcn\u00fcrl\u00fck durumuna ba\u011flaman\u0131za olanak tan\u0131yan bir CSS mod\u00fcl\u00fcd\u00fcr. Bu sayede, kullan\u0131c\u0131 kayd\u0131rd\u0131k\u00e7a animasyonunuzun oynat\u0131lma h\u0131z\u0131 ve durumu dinamik olarak de\u011fi\u015fir.<\/p>\n Scroll Timeline, iki ana kaynak t\u00fcr\u00fcn\u00fc izleyebilir:<\/p>\n Bir Scroll Timeline, kayd\u0131rma ilerlemesini 0% (ba\u015flang\u0131\u00e7) ile 100% (biti\u015f) aras\u0131nda bir y\u00fczde de\u011feri olarak temsil eder. Bu y\u00fczde de\u011feri, Tan\u0131mlad\u0131\u011f\u0131n\u0131z bir Scroll Timeline’\u0131 bir CSS animasyonuna ba\u011flamak i\u00e7in Scroll Timeline olu\u015fturmak i\u00e7in iki temel fonksiyon olan <\/code> <\/code> <\/code><\/p>\n <\/code><\/p>\n Bir kez bir Scroll Timeline tan\u0131mlad\u0131\u011f\u0131n\u0131zda, onu CSS animasyonlar\u0131n\u0131za ba\u011flamak ve bu animasyonlar\u0131n ne zaman ba\u015flay\u0131p bitece\u011fini kontrol etmek i\u00e7in <\/code> <\/code> Birden fazla elementi veya farkl\u0131 animasyonlar\u0131 ayn\u0131 Scroll Timeline'a ba\u011flayarak karma\u015f\u0131k ve senkronize efektler olu\u015fturabilirsiniz.<\/p>\n <\/code><\/p>\n Bu \u00f6rnek, bir elementin viewport'a girdi\u011finde yava\u015f\u00e7a yukar\u0131 kayarak g\u00f6r\u00fcnmesini sa\u011flar.<\/p>\n Bu bir kart i\u00e7eri\u011fidir.<\/p>\n <\/div>\n Bu da ba\u015fka bir kart i\u00e7eri\u011fidir.<\/p>\n <\/div>\n<\/section>\n<\/pre>\n <\/code><\/p>\n <\/code><\/p>\n CSS Scroll Timeline'\u0131n temel prensiplerini anlad\u0131ktan sonra, daha karma\u015f\u0131k ve etkileyici animasyonlar olu\u015fturmak i\u00e7in bu \u00f6zelli\u011fi nas\u0131l kullanabilece\u011finizi ke\u015ffedelim.<\/p>\n Paralaks kayd\u0131rma, farkl\u0131 katmanlar\u0131n farkl\u0131 h\u0131zlarda kayd\u0131r\u0131larak derinlik ill\u00fczyonu yaratmas\u0131d\u0131r. Scroll Timeline ile bu efektleri kolayca ve performansl\u0131 bir \u015fekilde olu\u015fturabilirsiniz.<\/p>\n <\/code><\/p>\n Bir makalenin veya sayfan\u0131n ne kadar\u0131n\u0131n okundu\u011funu g\u00f6steren bir ilerleme \u00e7ubu\u011fu olu\u015fturmak, kullan\u0131c\u0131 deneyimini iyile\u015ftiren yayg\u0131n bir desendir.<\/p>\n <\/code><\/p>\n Birden fazla elementin farkl\u0131 h\u0131zlarda veya farkl\u0131 aral\u0131klarda animasyon yapmas\u0131n\u0131 sa\u011flayarak zengin g\u00f6rsel hikayeler anlatabilirsiniz. Her bir elemente kendi Scroll Timeline animasyonlar\u0131, duyarl\u0131 tasar\u0131m prensipleriyle uyumlu olmal\u0131d\u0131r. Farkl\u0131 ekran boyutlar\u0131 i\u00e7in CSS Scroll Timeline, do\u011fas\u0131 gere\u011fi performans odakl\u0131 olsa da, en iyi sonu\u00e7lar\u0131 elde etmek i\u00e7in baz\u0131 optimizasyon tekniklerini bilmek \u00f6nemlidir. 2026 itibar\u0131yla taray\u0131c\u0131 deste\u011fi m\u00fckemmel durumdad\u0131r.<\/p>\n CSS animasyonlar\u0131, taray\u0131c\u0131 taraf\u0131ndan GPU (Grafik \u0130\u015flem Birimi) h\u0131zland\u0131rmal\u0131 olarak \u00e7al\u0131\u015ft\u0131r\u0131labilir. 2026'da CSS Scroll Timeline, Chrome, Firefox, Safari, Edge gibi t\u00fcm modern taray\u0131c\u0131lar taraf\u0131ndan tam olarak desteklenmektedir. Bu, geli\u015ftiricilerin art\u0131k Modern taray\u0131c\u0131 geli\u015ftirici ara\u00e7lar\u0131, Scroll Timeline animasyonlar\u0131n\u0131 hata ay\u0131klamak i\u00e7in g\u00fc\u00e7l\u00fc yetenekler sunar. Animasyon denetleyicileri, zaman \u00e7izelgelerini g\u00f6rselle\u015ftirebilir, animasyon ilerlemesini ad\u0131m ad\u0131m izleyebilir ve performans sorunlar\u0131n\u0131 tespit etmeye yard\u0131mc\u0131 olabilir.<\/p>\n CSS Scroll Timeline, web animasyonlar\u0131n\u0131n gelece\u011fi i\u00e7in sadece bir ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r. \u00d6n\u00fcm\u00fczdeki y\u0131llarda bu alanda daha bir\u00e7ok yenilik beklenmektedir.<\/p>\n Web Bile\u015fenleri (Custom Elements), yeniden kullan\u0131labilir UI par\u00e7alar\u0131 olu\u015fturmak i\u00e7in g\u00fc\u00e7l\u00fc bir mekanizmad\u0131r. Scroll Timeline, bu bile\u015fenlerin i\u00e7ine entegre edilerek, bile\u015fenlerin kendi i\u00e7 animasyonlar\u0131n\u0131 veya ana sayfa kayd\u0131rmas\u0131yla etkile\u015fimlerini kolayca y\u00f6netmesini sa\u011flayacakt\u0131r.<\/p>\n B\u00fcy\u00fck \u00f6l\u00e7ekli projelerde ve tasar\u0131m sistemlerinde, Scroll Timeline, tutarl\u0131 ve performansl\u0131 kayd\u0131rma animasyonlar\u0131 i\u00e7in standart bir \u00e7\u00f6z\u00fcm haline gelmi\u015ftir. \u00d6nceden tan\u0131mlanm\u0131\u015f zaman \u00e7izelgeleri ve animasyon aral\u0131klar\u0131, tasar\u0131mc\u0131lar\u0131n ve geli\u015ftiricilerin daha h\u0131zl\u0131 ve daha verimli \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar.<\/p>\n CSS animasyonlar\u0131 s\u00fcrekli geli\u015fmektedir. Scroll Timeline, geli\u015ftiricilere ve tasar\u0131mc\u0131lara, kullan\u0131c\u0131lar\u0131n i\u00e7eri\u011fi ke\u015ffetme \u015feklini d\u00f6n\u00fc\u015ft\u00fcrecek yeni ve yarat\u0131c\u0131 yollar sunar. Hikaye anlat\u0131m\u0131, interaktif k\u0131lavuzlar ve s\u00fcr\u00fckleyici deneyimler, bu \u00f6zelli\u011fin potansiyelini tam olarak ortaya \u00e7\u0131karacakt\u0131r.<\/p>\n CSS Scroll Timeline, web animasyonlar\u0131 d\u00fcnyas\u0131nda ger\u00e7ek bir d\u00f6n\u00fcm noktas\u0131d\u0131r. Geleneksel JavaScript tabanl\u0131 \u00e7\u00f6z\u00fcmlerin performans ve karma\u015f\u0131kl\u0131k sorunlar\u0131n\u0131 a\u015farak, geli\u015ftiricilere yerel, performansl\u0131 ve deklaratif bir animasyon mekanizmas\u0131 sunar. 2026 itibar\u0131yla tam taray\u0131c\u0131 deste\u011fi ve yayg\u0131n kullan\u0131m\u0131yla, modern web sitelerinde kayd\u0131rma tabanl\u0131 animasyonlar olu\u015fturman\u0131n standart yolu haline gelmi\u015ftir. Bu rehberde ele al\u0131nan temel kavramlar, geli\u015fmi\u015f kullan\u0131m senaryolar\u0131 ve en iyi uygulamalar sayesinde, siz de CSS Scroll Timeline'a hakim olabilir ve kullan\u0131c\u0131lar\u0131n\u0131z\u0131 b\u00fcy\u00fcleyecek dinamik ve ak\u0131c\u0131 web deneyimleri yaratabilirsiniz. Gelece\u011fin web'ini \u015fekillendiren bu g\u00fc\u00e7l\u00fc arac\u0131 ke\u015ffetmekten \u00e7ekinmeyin!<\/p>\n CSS Scroll Timeline, bir animasyonun ilerlemesini sabit bir zaman yerine, bir kayd\u0131rma konteynerinin kayd\u0131rma pozisyonuna veya bir elementin g\u00f6r\u00fcn\u00fcrl\u00fck durumuna ba\u011flaman\u0131z\u0131 sa\u011flayan bir CSS \u00f6zelli\u011fidir. Bu sayede, kullan\u0131c\u0131 kayd\u0131rd\u0131k\u00e7a animasyon dinamik olarak oynat\u0131l\u0131r.<\/p>\n CSS Scroll Timeline, taray\u0131c\u0131 taraf\u0131ndan do\u011frudan optimize edildi\u011fi i\u00e7in genellikle JavaScript tabanl\u0131 \u00e7\u00f6z\u00fcmlerden daha performansl\u0131d\u0131r. Ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 me\u015fgul etmez, GPU h\u0131zland\u0131rmas\u0131ndan faydalan\u0131r ve daha ak\u0131c\u0131 animasyonlar sunar. Ayr\u0131ca, daha az kod yazmay\u0131 gerektirir ve daha deklaratif bir yakla\u015f\u0131md\u0131r.<\/p>\n 2026 itibar\u0131yla, Google Chrome, Mozilla Firefox, Apple Safari ve Microsoft Edge dahil olmak \u00fczere t\u00fcm modern ana taray\u0131c\u0131lar CSS Scroll Timeline'\u0131 tam olarak desteklemektedir.<\/p>\n Evet, olumlu bir etkisi vard\u0131r. CSS Scroll Timeline, taray\u0131c\u0131lar\u0131n animasyonlar\u0131 optimize etmesine olanak tan\u0131r ve genellikle JavaScript tabanl\u0131 kayd\u0131rma animasyonlar\u0131ndan daha ak\u0131c\u0131 ve performansl\u0131d\u0131r. \u00d6zellikle Kesinlikle. @keyframes<\/code>, animation<\/code> \u00f6zellikleri) taray\u0131c\u0131lar\u0131n ana i\u015f par\u00e7ac\u0131\u011f\u0131ndan ba\u011f\u0131ms\u0131z olarak GPU h\u0131zland\u0131rmal\u0131 animasyonlar \u00e7al\u0131\u015ft\u0131rmas\u0131na olanak tan\u0131yarak performansta \u00f6nemli bir s\u0131\u00e7rama sa\u011flad\u0131. Ancak bu animasyonlar genellikle zaman tabanl\u0131yd\u0131 ve do\u011frudan kayd\u0131rma ilerlemesiyle senkronize edilemiyordu. \u0130\u015fte bu noktada bir bo\u015fluk vard\u0131.<\/p>\nScroll Timeline’\u0131n Getirdi\u011fi Devrim<\/h4>\n
2026’da Standart Haline Geli\u015fi<\/h4>\n
CSS Scroll Timeline Nedir ve Nas\u0131l \u00c7al\u0131\u015f\u0131r? Temel Kavramlar<\/h3>\n
scroll-timeline<\/code> \u00d6zelli\u011fi<\/h4>\nscroll-timeline<\/code> \u00f6zelli\u011fi, bir elementin veya k\u00f6k elementin (viewport) kayd\u0131rma ilerlemesini izleyen bir zaman \u00e7izelgesi tan\u0131mlamak i\u00e7in kullan\u0131l\u0131r. Bu \u00f6zellik, bir elementin overflow<\/code> \u00f6zelli\u011fi scroll<\/code>, auto<\/code> veya hidden<\/code> olarak ayarland\u0131\u011f\u0131nda bir kayd\u0131rma konteyneri haline gelmesiyle tetiklenir.<\/p>\nZaman \u00c7izelgesi Kaynaklar\u0131:
scroll()<\/code> ve view()<\/code><\/h4>\n\n
scroll()<\/code>: Belirli bir kayd\u0131rma konteynerinin (veya varsay\u0131lan olarak belge k\u00f6k\u00fcn\u00fcn) kayd\u0131rma pozisyonunu izler. \u00d6rne\u011fin, bir div<\/code> elementinin i\u00e7indeki i\u00e7eri\u011fin kayd\u0131r\u0131lmas\u0131.<\/li>\nview()<\/code>: Belirli bir elementin, belirlenen bir kayd\u0131rma konteyneri i\u00e7inde ne kadar\u0131n\u0131n g\u00f6r\u00fcn\u00fcr oldu\u011funu izler. Bu, bir elementin g\u00f6r\u00fcn\u00fcr alana girip \u00e7\u0131kmas\u0131na g\u00f6re animasyonlar\u0131 tetiklemek i\u00e7in idealdir.<\/li>\n<\/ul>\nAnimasyon \u0130lerlemesi ve Y\u00fczdelik De\u011ferler<\/h4>\n
@keyframes<\/code> animasyonlar\u0131n\u0131zdaki y\u00fczde de\u011ferleriyle do\u011frudan e\u015fle\u015fir. \u00d6rne\u011fin, kayd\u0131rma %50’ye ula\u015ft\u0131\u011f\u0131nda, animasyonunuzun %50’si oynat\u0131lm\u0131\u015f olur.<\/p>\nanimation-timeline<\/code> ile Ba\u011flant\u0131<\/h4>\nanimation-timeline<\/code> \u00f6zelli\u011fini kullan\u0131rs\u0131n\u0131z. Bu \u00f6zellik, animasyonun hangi zaman \u00e7izelgesini takip edece\u011fini belirtir.<\/p>\nScroll Timeline Olu\u015fturma:
scroll()<\/code> ve view()<\/code> Fonksiyonlar\u0131<\/h3>\nscroll()<\/code> ve view()<\/code> kullan\u0131l\u0131r. Bu fonksiyonlar, hangi kayd\u0131rma olay\u0131n\u0131n izlenece\u011fini ve nas\u0131l bir zaman \u00e7izelgesi olu\u015fturulaca\u011f\u0131n\u0131 belirler.<\/p>\nscroll()<\/code> ile Kapsay\u0131c\u0131 Kayd\u0131rmas\u0131n\u0131 \u0130zleme<\/h4>\nscroll()<\/code> fonksiyonu, bir kayd\u0131rma konteynerinin (veya varsay\u0131lan olarak viewport’un) genel kayd\u0131rma ilerlemesini izlemek i\u00e7in kullan\u0131l\u0131r.<\/p>\n\n.scroll-container {\n overflow-y: scroll;\n height: 300px;\n \/* Kayd\u0131rma zaman \u00e7izelgesi tan\u0131mla *\/\n scroll-timeline-name: --my-scroll-timeline;\n scroll-timeline-axis: block; \/* veya y *\/\n}\n\n.animating-element {\n animation: my-animation 1s linear forwards;\n animation-timeline: --my-scroll-timeline; \/* Animasyonu zaman \u00e7izelgesine ba\u011fla *\/\n}\n\n@keyframes my-animation {\n from { transform: translateX(0); }\n to { transform: translateX(100px); }\n}\n<\/pre>\n
\nBu \u00f6rnekte, .scroll-container<\/code> i\u00e7indeki kayd\u0131rma ilerlemesi --my-scroll-timeline<\/code> ad\u0131nda bir zaman \u00e7izelgesi olu\u015fturur ve .animating-element<\/code> bu zaman \u00e7izelgesine g\u00f6re hareket eder.<\/p>\nview()<\/code> ile Bir Elementin G\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc \u0130zleme<\/h4>\nview()<\/code> fonksiyonu, belirli bir elementin, belirlenen bir kayd\u0131rma konteyneri i\u00e7indeki g\u00f6r\u00fcn\u00fcrl\u00fck durumunu izlemek i\u00e7in kullan\u0131l\u0131r. Bu, bir element viewport'a girdi\u011finde veya \u00e7\u0131kt\u0131\u011f\u0131nda animasyonlar\u0131 tetiklemek i\u00e7in m\u00fckemmeldir.<\/p>\n\n.section {\n \/* Bu elementin g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc izleyen bir zaman \u00e7izelgesi olu\u015ftur *\/\n view-timeline-name: --section-visibility;\n view-timeline-axis: block;\n}\n\n.section-title {\n animation: fade-in 1s linear forwards;\n animation-timeline: --section-visibility;\n}\n\n@keyframes fade-in {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n}\n<\/pre>\n
\nBurada, .section<\/code> elementinin g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fc --section-visibility<\/code> zaman \u00e7izelgesini olu\u015fturur ve .section-title<\/code> bu zaman \u00e7izelgesine g\u00f6re g\u00f6r\u00fcn\u00fcr hale gelir.<\/p>\nscroll-timeline-axis<\/code> ve scroll-timeline-name<\/code><\/h4>\n\n
scroll-timeline-axis<\/code>: Kayd\u0131rma eksenini belirler. block<\/code> (dikey), inline<\/code> (yatay), x<\/code> veya y<\/code> de\u011ferlerini alabilir.<\/li>\nscroll-timeline-name<\/code>: Zaman \u00e7izelgesine \u00f6zel bir isim ataman\u0131z\u0131 sa\u011flar. Bu isim, animation-timeline<\/code> \u00f6zelli\u011fi ile animasyonlara ba\u011flanmak i\u00e7in kullan\u0131l\u0131r. \u00d6zel CSS de\u011fi\u015fkenleri (--my-name<\/code>) kullan\u0131l\u0131r.<\/li>\n<\/ul>\n\u00d6rnek Kod: Basit Bir Scroll Timeline Tan\u0131mlama<\/h4>\n
\n\n.container {\n height: 400px;\n overflow-y: scroll;\n scroll-timeline-name: --container-scroll;\n scroll-timeline-axis: y;\n}\n\n.item {\n height: 200px;\n width: 100px;\n background-color: dodgerblue;\n margin-top: 500px; \/* Kayd\u0131rma gerektirecek kadar bo\u015fluk *\/\n animation: move-and-scale 1s linear forwards;\n animation-timeline: --container-scroll;\n}\n\n@keyframes move-and-scale {\n 0% { transform: translateX(0) scale(1); }\n 50% { transform: translateX(150px) scale(1.2); }\n 100% { transform: translateX(300px) scale(1); }\n}\n<\/pre>\nanimation-timeline<\/code> ile Animasyonlar\u0131 Ba\u011flama ve Kontrol Etme<\/h3>\nanimation-timeline<\/code> ve animation-range<\/code> \u00f6zelliklerini kullan\u0131rs\u0131n\u0131z.<\/p>\nanimation<\/code> K\u0131sayolu ve animation-timeline<\/code><\/h4>\nanimation<\/code> k\u0131sayol \u00f6zelli\u011fi, animation-timeline<\/code> dahil olmak \u00fczere t\u00fcm animasyon \u00f6zelliklerini tek bir sat\u0131rda tan\u0131mlaman\u0131za olanak tan\u0131r.<\/p>\n\n.my-element {\n animation: my-keyframe-animation 1s linear forwards --my-scroll-timeline;\n}\n<\/pre>\n
\nBurada, --my-scroll-timeline<\/code> ad\u0131ndaki zaman \u00e7izelgesi, my-keyframe-animation<\/code> animasyonunu kontrol eder.<\/p>\nanimation-range<\/code> ile Animasyon Aral\u0131klar\u0131n\u0131 Belirleme<\/h4>\nanimation-range<\/code> \u00f6zelli\u011fi, bir animasyonun Scroll Timeline'\u0131n hangi b\u00f6l\u00fcm\u00fcnde oynat\u0131laca\u011f\u0131n\u0131 hassas bir \u015fekilde kontrol etmenizi sa\u011flar. Bu, bir elementin yaln\u0131zca belirli bir g\u00f6r\u00fcn\u00fcrl\u00fck aral\u0131\u011f\u0131nda animasyon yapmas\u0131n\u0131 istedi\u011finizde \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n\n.section-image {\n animation: slide-in 1s linear forwards;\n animation-timeline: view(); \/* Varsay\u0131lan view timeline *\/\n animation-range: entry 25% cover 50%; \/* Elementin %25'i g\u00f6r\u00fcnd\u00fc\u011f\u00fcnde ba\u015fla, %50'si kaplad\u0131\u011f\u0131nda bitir *\/\n}\n\n@keyframes slide-in {\n from { transform: translateX(-100%); }\n to { transform: translateX(0); }\n}\n<\/pre>\n
\nanimation-range<\/code> de\u011ferleri, entry<\/code>, exit<\/code>, cover<\/code> ve y\u00fczdelik de\u011ferler kullan\u0131larak belirlenebilir.<\/p>\nBirden Fazla Animasyonu Ayn\u0131 Zaman \u00c7izelgesine Ba\u011flama<\/h4>\n
\n.parent-container {\n overflow-y: scroll;\n scroll-timeline-name: --parent-scroll;\n scroll-timeline-axis: y;\n}\n\n.child-1 {\n animation: rotate-me 1s linear forwards;\n animation-timeline: --parent-scroll;\n}\n\n.child-2 {\n animation: scale-me 1s linear forwards;\n animation-timeline: --parent-scroll;\n}\n<\/pre>\nKod \u00d6rne\u011fi: G\u00f6r\u00fcn\u00fcrl\u00fckle Tetiklenen Bir Animasyon<\/h4>\n
\nHo\u015f Geldiniz<\/h2>\n<\/section>\n\n
Ba\u015fl\u0131k 1<\/h3>\n
Ba\u015fl\u0131k 2<\/h3>\n
\n.card {\n opacity: 0;\n transform: translateY(50px);\n animation: reveal-card 1s linear forwards;\n animation-timeline: view(); \/* Varsay\u0131lan view timeline *\/\n animation-range: entry 20% cover 50%; \/* Elementin %20'si g\u00f6r\u00fcnd\u00fc\u011f\u00fcnde ba\u015fla, %50'si kaplad\u0131\u011f\u0131nda bitir *\/\n margin-bottom: 200px; \/* Kayd\u0131rma i\u00e7in bo\u015fluk *\/\n}\n\n@keyframes reveal-card {\n to { opacity: 1; transform: translateY(0); }\n}\n<\/pre>\nGeli\u015fmi\u015f Kullan\u0131m Senaryolar\u0131 ve En \u0130yi Uygulamalar<\/h3>\n
Paralaks Etkileri Olu\u015fturma<\/h4>\n
\n.paralaks-bg {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: url('bg.jpg');\n background-size: cover;\n animation: paralaks-scroll 1s linear forwards;\n animation-timeline: scroll(); \/* Dok\u00fcman kayd\u0131rmas\u0131n\u0131 izle *\/\n animation-range: 0% 100%;\n}\n\n@keyframes paralaks-scroll {\n to { transform: translateY(-50%); } \/* Arka plan\u0131 daha yava\u015f kayd\u0131r *\/\n}\n<\/pre>\nOkuma \u0130lerlemesi G\u00f6stergeleri<\/h4>\n
\n.progress-bar {\n position: fixed;\n top: 0;\n left: 0;\n height: 5px;\n background-color: tomato;\n width: 0%;\n animation: read-progress 1s linear forwards;\n animation-timeline: scroll();\n}\n\n@keyframes read-progress {\n to { width: 100%; }\n}\n<\/pre>\n\u00c7ok Katmanl\u0131 Animasyonlar ve Katmanlama<\/h4>\n
animation-range<\/code> de\u011ferini atayarak veya farkl\u0131 animation-timeline<\/code>'lar tan\u0131mlayarak bu karma\u015f\u0131kl\u0131\u011f\u0131 y\u00f6netebilirsiniz.<\/p>\nDuyarl\u0131 Tasar\u0131mda Scroll Timeline Kullan\u0131m\u0131<\/h4>\n
@media<\/code> sorgular\u0131 kullanarak animasyonlar\u0131n\u0131z\u0131 ayarlayabilir veya belirli animasyonlar\u0131 devre d\u0131\u015f\u0131 b\u0131rakabilirsiniz. \u00d6rne\u011fin, mobil cihazlarda karma\u015f\u0131k paralaks efektlerinden ka\u00e7\u0131nmak performans\u0131 art\u0131rabilir.<\/p>\nPerformans Optimizasyonu ve Taray\u0131c\u0131 Deste\u011fi (2026 Perspektifi)<\/h3>\n
GPU H\u0131zland\u0131rman\u0131n \u00d6nemi<\/h4>\n
transform<\/code>, opacity<\/code> gibi \u00f6zelliklerin animasyonu, genellikle ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 engellemeden do\u011frudan GPU \u00fczerinde i\u015flenir. Bu, Scroll Timeline ile birlikte kullan\u0131ld\u0131\u011f\u0131nda \u00e7ok ak\u0131c\u0131 animasyonlar sa\u011flar.<\/p>\nTaray\u0131c\u0131 Deste\u011fi ve Geriye D\u00f6n\u00fck Uyumluluk Stratejileri<\/h4>\n
prefers-reduced-motion<\/code> gibi medya sorgular\u0131n\u0131 kullanarak animasyonlar\u0131 kullan\u0131c\u0131 tercihlerine g\u00f6re ayarlayabilece\u011fi anlam\u0131na gelir. Geriye d\u00f6n\u00fck uyumluluk i\u00e7in, supports()<\/code> sorgular\u0131 ile \u00f6zelli\u011fi desteklemeyen taray\u0131c\u0131lar i\u00e7in alternatif stiller veya JavaScript tabanl\u0131 yedekler sunulabilir, ancak 2026 itibar\u0131yla bu nadiren gerekli olacakt\u0131r.<\/p>\nPerformans \u0130pu\u00e7lar\u0131:
will-change<\/code> ve transform<\/code> Kullan\u0131m\u0131<\/h4>\n\n
will-change<\/code>: Taray\u0131c\u0131ya bir elementin hangi \u00f6zelliklerinin de\u011fi\u015fece\u011fini \u00f6nceden bildirerek optimizasyon yapmas\u0131na olanak tan\u0131r. Ancak dikkatli kullan\u0131lmal\u0131, gereksiz yere eklenmemelidir.<\/li>\ntransform<\/code> ve opacity<\/code>: Bu \u00f6zelliklerin animasyonu genellikle en performansl\u0131d\u0131r \u00e7\u00fcnk\u00fc bunlar d\u00fczeni (layout) veya boyamay\u0131 (paint) tetiklemez.<\/li>\nfilter<\/code> gibi \u00f6zelliklerin animasyonu daha maliyetli olabilir.<\/li>\n<\/ul>\nGeli\u015ftirici Ara\u00e7lar\u0131 ile Hata Ay\u0131klama<\/h4>\n
Gelecek Trendler ve CSS Animasyonlar\u0131nda Scroll Timeline'\u0131n Rol\u00fc<\/h3>\n
Web Bile\u015fenleri ile Entegrasyon<\/h4>\n
Tasar\u0131m Sistemlerinde Scroll Timeline<\/h4>\n
Yeni CSS Animasyon \u00d6zellikleri ile Sinerji<\/h4>\n
motion-path<\/code>, CSS Houdini<\/code> gibi di\u011fer yeni veya geli\u015fmekte olan CSS \u00f6zellikleri ile Scroll Timeline'\u0131n birle\u015fimi, daha \u00f6nce hayal bile edilemeyen karma\u015f\u0131k ve etkile\u015fimli animasyonlar\u0131n do\u011frudan CSS ile olu\u015fturulmas\u0131na olanak tan\u0131yacakt\u0131r.<\/p>\nKullan\u0131c\u0131 Deneyiminde Yenilik\u00e7i Yakla\u015f\u0131mlar<\/h4>\n
Sonu\u00e7<\/h3>\n
SSS (S\u0131k Sorulan Sorular)<\/h3>\n
CSS Scroll Timeline nedir?<\/h4>\n
Neden JavaScript yerine CSS Scroll Timeline kullanmal\u0131y\u0131m?<\/h4>\n
Hangi taray\u0131c\u0131lar CSS Scroll Timeline'\u0131 destekliyor (2026 itibar\u0131yla)?<\/h4>\n
Performans \u00fczerinde bir etkisi var m\u0131?<\/h4>\n
transform<\/code> ve opacity<\/code> gibi \u00f6zelliklerin animasyonu GPU h\u0131zland\u0131rmas\u0131ndan faydalan\u0131r.<\/p>\nKarma\u015f\u0131k animasyonlar i\u00e7in uygun mu?<\/h4>\n
animation-range<\/code> \u00f6zelli\u011fi ve birden fazla animasyonu ayn\u0131 veya farkl\u0131 zaman \u00e7izelgelerine ba\u011flama yetene\u011fi sayesinde, paralaks efektleri, okuma ilerlemesi g\u00f6stergeleri ve \u00e7ok katmanl\u0131 animasyonlar gibi olduk\u00e7a karma\u015f\u0131k ve senkronize kayd\u0131rma tabanl\u0131 animasyonlar olu\u015fturmak i\u00e7in uygundur.<\/p>\n","protected":false},"excerpt":{"rendered":". scroll-container { overflow-y: scroll; height: 300px; \/* Kayd\u0131rma zaman \u00e7izelgesi tan\u0131mla *\/ scroll-timeline-name: –my-scroll-timeline; scroll-timeline-axis: block; \/* veya y *\/ } .","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[126],"tags":[],"class_list":{"0":"post-41240","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css3-html5","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n