Terdapat beberapa animasi tatal yang mungkin ada di CSS tanpa JavaScript sama sekali. Lihat sahaja bab di Scroll Indicator, yang jelas merupakan keajaiban CSS. Tetapi kita dapat melakukan banyak kerja animasi tatal secara langsung dalam CSS dengan hanya sedikit maklumat yang diberikan oleh JavaScript: sejauh mana halaman itu ditatal.
Oleh itu, mari kita keluarkannya. Dengan satu-satu JavaScript, kita dapat menetapkan sifat khusus CSS yang mengetahui peratusan halaman yang ditatal:
window.addEventListener('scroll', () => ( document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight)); ), false);Sekarang kita mempunyai --scrollnilai yang dapat kita gunakan dalam CSS.
Silap mata ini datang oleh Scott Kellum yang merupakan master tipu muslihat CSS!
Mari sediakan animasi tanpa menggunakan nilai itu pada mulanya. Ini adalah animasi berputar sederhana untuk elemen SVG yang akan berputar dan berputar selama-lamanya:
svg ( display: inline-block; animation: rotate 1s linear infinite; ) @keyframes rotate ( to ( transform: rotate(360deg); ) )Inilah helahnya! Sekarang mari kita jeda animasi ini. Daripada menganimasikannya dalam jangka masa tertentu, kami akan menganimasikannya melalui kedudukan tatal dengan menyesuaikan animation-delaysebagai tatal halaman. Sekiranya animation-duration1s, itu bermaksud menatal seluruh halaman. adalah satu lelaran animasi.
svg ( position: fixed; /* make sure it stays put so we can see it! */ animation: rotate 1s linear infinite; animation-play-state: paused; animation-delay: calc(var(--scroll) * -1s); ) Cuba ubah animation-durationke 0.5s. Itu membolehkan dua animasi dapat diselesaikan dengan animation-delaymatematik.
Scott menyatakan dalam demo asalnya yang juga menetapkan:
animation-iteration-count: 1; animation-fill-mode: both;Mengakui beberapa keanehan "overhoot" dan saya dapat membuktikan bahawa saya juga pernah melihatnya, terutama di viewport pendek, jadi perlu juga menetapkannya.
Scott juga menetapkan sifat animasi yang berkaitan dengan tatal :root ()itu sendiri, yang bermaksud bahawa ia dapat mengawal semua animasi di halaman sekaligus. Inilah demo beliau yang mengendalikan tiga animasi secara serentak: