CSS slinkties animacijų įvaldymas: išsami laiko juostų sinchronizavimo analizė

Daugelį metų įtraukiančių, su slinktimi susietų animacijų kūrimas internete buvo JavaScript sritis. Kūrėjai rėmėsi bibliotekomis ir sudėtingais `requestAnimationFrame` ciklais, nuolat stebėdami slinkties įvykius. Nors šis metodas yra veiksmingas, jis dažnai kainuoja našumo sąskaita, sukeldamas trūkčiojimą ir ne tokią sklandžią patirtį, ypač mažiau galinguose įrenginiuose. Šiandien vyksta paradigmos pokytis, perkeliantis visą šią vartotojo sąsajos dizaino kategoriją tiesiai į naršyklės didelio našumo atvaizdavimo variklį, dėka CSS slinkties animacijų.

Ši galinga nauja specifikacija leidžia mums susieti animacijos eigą tiesiogiai su konteinerio slinkties padėtimi arba elemento matomumu. Rezultatas – idealiai sklandžios, GPU paspartintos animacijos, kurios yra deklaratyvios, prieinamos ir nepaprastai efektyvios. Tačiau tikrasis kūrybinis potencialas atsiskleidžia, kai pereiname nuo pavienių elementų animavimo prie sudėtingų, darniai veikiančių sąveikų derinimo. Tai yra animacijų sinchronizavimo menas.

Šiame išsamiame vadove mes išnagrinėsime pagrindines CSS slinkties animacijų laiko juostų sąvokas ir gilinsimės į jų sinchronizavimui reikalingas technikas. Jūs išmoksite kurti sluoksniuotus paralakso efektus, nuoseklius pasakojimo atskleidimus ir sudėtingas komponentų sąveikas – viską naudojant tik gryną CSS. Mes aptarsime:

• Esminį skirtumą tarp `scroll()` ir `view()` laiko juostų.
• Revoliucinę pavadintų laiko juostų koncepciją, skirtą kelių elementų sinchronizavimui.
• Smulkų animacijos atkūrimo valdymą naudojant `animation-range`.
• Praktiškus, realaus pasaulio pavyzdžius su kodu, kurį galite naudoti jau šiandien.
• Geriausias praktikas našumui, prieinamumui ir naršyklių suderinamumui.

Pasiruoškite iš naujo įvertinti, kas įmanoma su CSS, ir pakelti savo žiniatinklio patirtis į naują interaktyvumo ir išbaigtumo lygį.

Pagrindas: animacijos laiko juostų supratimas

Prieš sinchronizuodami animacijas, pirmiausia turime suprasti mechanizmą, kuris jas valdo. Tradiciškai CSS animacijos laiko juosta yra pagrįsta laiko tėkme, kurią apibrėžia jos `animation-duration`. Su slinkties animacijomis mes nutraukiame šį ryšį su laiku ir vietoj to susiejame animacijos eigą su nauju šaltiniu: eigos laiko juosta (progress timeline).

Tai pasiekiama daugiausia per `animation-timeline` savybę. Užuot leidusi animacijai veikti pačiai po paleidimo, ši savybė nurodo naršyklei peržiūrėti animacijos raktinius kadrus pagal nurodytos laiko juostos eigą. Kai laiko juosta yra ties 0%, animacija yra ties savo 0% raktiniu kadru. Kai laiko juosta yra ties 50%, animacija yra ties savo 50% raktiniu kadru ir t. t.

CSS specifikacija pateikia dvi pagrindines funkcijas šioms eigos laiko juostoms sukurti:

1. `scroll()`: Sukuria anoniminę laiko juostą, kuri seka slenkančio konteinerio (scroller) slinkties eigą.
2. `view()`: Sukuria anoniminę laiko juostą, kuri seka konkretaus elemento matomumą, jam judant per peržiūros sritį (ar bet kurį slinkties konteinerį).

Panagrinėkime kiekvieną iš jų išsamiau, kad sukurtume tvirtą pagrindą.

Išsami analizė: `scroll()` eigos laiko juosta

Kas yra `scroll()`?

`scroll()` funkcija idealiai tinka animacijoms, kurios turėtų atitikti bendrą puslapio ar konkretaus slankiojo elemento slinkties eigą. Klasikinis pavyzdys yra skaitymo eigos juosta straipsnio viršuje, kuri užsipildo, kai vartotojas slenka puslapį žemyn.

Ji matuoja, kiek vartotojas prasisuko per slinkties konteinerį. Pagal numatytuosius nustatymus ji seka viso dokumento slinkties padėtį, tačiau gali būti sukonfigūruota sekti bet kurį slankųjį konteinerį puslapyje.

Sintaksė ir parametrai

Pagrindinė `scroll()` funkcijos sintaksė yra tokia:

animation-timeline: scroll(<scroller> <axis>);

Išnagrinėkime jos parametrus:

• `<scroller>` (neprivaloma): Nurodo, kurio slinkties konteinerio eiga turėtų būti sekama.
  • root: Numatytasis reikšmė. Ji atspindi dokumento peržiūros srities slinkties konteinerį (pagrindinę puslapio slinkties juostą).
  • self: Seka paties elemento slinkties padėtį, darant prielaidą, kad jis yra slinkties konteineris (pvz., turi `overflow: scroll`).
  • nearest: Seka artimiausio protėvinio slinkties konteinerio slinkties padėtį.
• `<axis>` (neprivaloma): Nurodo slinkties ašį, kurią reikia sekti.
  • block: Numatytasis reikšmė. Seka eigą išilgai bloko ašies (vertikalią horizontalioms rašymo sistemoms, kaip anglų kalba).
  • inline: Seka eigą išilgai inline ašies (horizontalią anglų kalbai).
  • y: Aiškus vertikalios ašies sinonimas.
  • x: Aiškus horizontalios ašies sinonimas.

Praktinis pavyzdys: puslapio slinkties eigos juosta

Sukurkime tą klasikinį skaitymo eigos indikatorių. Tai puiki `scroll()` demonstracija pačia paprasčiausia forma.

HTML struktūra:

            <div class="progress-bar"></div>
<article>
  <h1>A Long Article Title</h1>
  <p>... a lot of content here ...</p>
  <p>... more content to make the page scrollable ...</p>
</article>
            

              
                Copy
              
            
          

CSS įgyvendinimas:

            /* Define the keyframes for the progress bar */
@keyframes grow-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Style the progress bar */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background-color: dodgerblue;
  transform-origin: left; /* Animate scale from the left side */

  /* Link the animation to the scroll timeline */
  animation: grow-progress linear;
  animation-timeline: scroll(root block);
}

/* Basic body styling for demonstration */
body {
  font-family: sans-serif;
  line-height: 1.6;
  padding: 2rem;
  height: 300vh; /* Ensure there is plenty to scroll */
}
            

              
                Copy
              
            
          

Paaiškinimas:

1. Mes apibrėžiame paprastą `grow-progress` animaciją, kuri keičia elemento mastelį horizontaliai nuo 0 iki 1.
2. `.progress-bar` yra fiksuotas peržiūros srities viršuje.
3. Magija įvyksta su paskutinėmis dviem savybėmis. Mes pritaikome `grow-progress` animaciją. Svarbiausia, kad vietoj trukmės (pvz., `1s`), nustatome jos `animation-timeline` į `scroll(root block)`.
4. Tai nurodo naršyklei: "Neleisk šios animacijos laikui bėgant. Vietoj to, slink per jos raktinius kadrus, kai vartotojas slenka pagrindinį dokumentą vertikaliai (`block` ašimi)."

Kai vartotojas yra pačiame puslapio viršuje (0% slinkties eigos), juostos `scaleX` bus 0. Kai jie yra pačiame apačioje (100% slinkties eigos), jos `scaleX` bus 1. Rezultatas yra idealiai sklandi eigos juosta be jokio JavaScript.

Artumo galia: `view()` eigos laiko juosta

Kas yra `view()`?

Nors `scroll()` yra apie bendrą konteinerio eigą, `view()` yra apie vieno elemento kelionę per matomą slinkties konteinerio sritį. Tai yra natūralus CSS sprendimas nepaprastai paplitusiam "animuoti atsirandant" (animate on reveal) modeliui, kai elementai išnyksta, paslenka į viršų ar kitaip animuojasi, kai atsiranda ekrane.

`view()` laiko juosta prasideda, kai elementas pirmą kartą tampa matomas slinkties srityje, ir baigiasi, kai jis visiškai išeina iš matymo lauko. Tai suteikia mums laiko juostą nuo 0% iki 100%, kuri yra tiesiogiai susieta su elemento matomumu, todėl ji yra neįtikėtinai intuityvi atsiradimo efektams.

Sintaksė ir parametrai

`view()` sintaksė yra šiek tiek kitokia:

animation-timeline: view(<axis> <view-timeline-inset>);

• `<axis>` (neprivaloma): Tas pats, kas `scroll()` (`block`, `inline`, `y`, `x`). Nustato, kurios slinkties srities ašies atžvilgiu sekamas elemento matomumas.
• `<view-timeline-inset>` (neprivaloma): Tai galingas parametras, leidžiantis reguliuoti "aktyvios" peržiūros srities ribas. Jis gali priimti vieną ar dvi reikšmes (atitinkamai pradžios ir pabaigos įtraukoms). Galite naudoti procentus arba fiksuotus ilgius. Pavyzdžiui, `100px 20%` reiškia, kad laiko juosta laiko, jog peržiūros sritis prasideda 100px nuo viršaus ir baigiasi 20% nuo apačios. Tai leidžia tiksliai sureguliuoti, kada animacija prasideda ir baigiasi, atsižvelgiant į elemento padėtį ekrane.

Praktinis pavyzdys: išnykimas atsirandant

Sukurkime klasikinį efektą, kai turinio kortelės išnyksta ir paslenka į matymo lauką, kai jos slenkamos ekrane.

HTML struktūra:

            <section class="content-grid">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
</section>
            

              
                Copy
              
            
          

CSS įgyvendinimas:

            /* Define keyframes for the reveal animation */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  /* Apply the animation to each card */
  animation: fade-in-up linear;
  animation-timeline: view(); /* This is it! */

  /* Other styling */
  background-color: #f0f0f0;
  padding: 2rem;
  border-radius: 8px;
  min-height: 200px;
  display: grid;
  place-content: center;
  font-size: 2rem;
}

/* Layout styling */
.content-grid {
  display: grid;
  gap: 2rem;
  padding: 10vh 2rem;
}
            

              
                Copy
              
            
          

Paaiškinimas:

1. `fade-in-up` raktiniai kadrai apibrėžia norimą animaciją: pradėti skaidriai ir šiek tiek žemiau, baigti nepermatomai ir galutinėje padėtyje.
2. Kiekvienam `.card` elementui taikoma ši animacija.
3. Esminė eilutė yra `animation-timeline: view();`. Tai sukuria unikalią, anoniminę laiko juostą kiekvienai kortelei.
4. Kiekvienos atskiros kortelės animacija bus 0%, kai ji tik pradeda patekti į peržiūros sritį, ir pasieks 100%, kai ji ką tik baigs išeiti iš peržiūros srities.

Kai slenkate puslapį žemyn, kiekviena kortelė sklandžiai animuosis į savo vietą tiksliai tada, kai ji pasirodys matymo lauke. Tai pasiekiama vos dviem CSS eilutėmis – pasiekimas, kuriam anksčiau reikėjo JavaScript Intersection Observer ir kruopštaus būsenos valdymo.

Pagrindinė tema: animacijų sinchronizavimas

Naudoti anonimines `scroll()` ir `view()` laiko juostas yra galinga izoliuotiems efektams. Bet ką daryti, jei norime, kad keli elementai reaguotų į tą pačią laiko juostą? Įsivaizduokite paralakso efektą, kai fono paveikslėlis, antraštė ir priekinio plano elementas juda skirtingais greičiais, bet visi yra valdomi to paties slinkties veiksmo. Arba produkto vaizdas, kuris transformuojasi, kai slenkate pro jo savybių sąrašą.

Čia atsiranda sinchronizavimas, o raktas yra pereiti nuo anoniminių laiko juostų prie pavadintų laiko juostų.

Kodėl sinchronizuoti?

Sinchronizavimas leidžia kurti turtingas, pasakojimu pagrįstas patirtis. Užuot turėję nepriklausomų animacijų rinkinį, galite sukurti vientisą sceną, kuri vystosi vartotojui slenkant. Tai būtina norint:

• Sudėtingų paralakso efektų: Sukurti gilumo pojūtį judinant skirtingus sluoksnius skirtingu greičiu, atsižvelgiant į vieną slinkties paleidiklį.
• Koordinuotų komponentų būsenų: Animuoti skirtingas sudėtingo UI komponento dalis kartu, kai jis slenka į matymo lauką.
• Vizualinio pasakojimo: Atskleisti ir transformuoti elementus kruopščiai choreografuotoje sekoje, kad vartotojas būtų vedamas per pasakojimą.

Technika: bendros pavadintos laiko juostos

Sinchronizavimo mechanizmas apima tris naujas CSS savybes:

1. `timeline-scope`: Taikoma konteinerio elementui. Ji sukuria apimtį, kurioje joje apibrėžtas pavadintas laiko juostas gali rasti kiti elementai.
2. `scroll-timeline-name` / `view-timeline-name`: Taikoma elementui, norint sukurti ir pavadinti laiko juostą. Pavadinimas turi būti brūkšneliu atskirtas identifikatorius (pvz., `--my-timeline`). Šio elemento slinkties eiga (`scroll-timeline-name`) arba matomumas (`view-timeline-name`) tampa pavadintos laiko juostos šaltiniu.
3. `animation-timeline`: Tai jau matėme anksčiau, bet dabar, vietoj `scroll()` ar `view()`, mes perduodame brūkšneliu atskirtą mūsų bendros laiko juostos pavadinimą (pvz., `animation-timeline: --my-timeline;`).

Procesas yra toks: 1. Protėvinis elementas apibrėžia `timeline-scope`. 2. Palikuonio elementas apibrėžia ir pavadina laiko juostą naudodamas `view-timeline-name` arba `scroll-timeline-name`. 3. Bet kuris kitas palikuonio elementas gali tada naudoti tą pavadinimą savo `animation-timeline` savybėje, kad prisijungtų prie tos pačios laiko juostos.

Praktinis pavyzdys: daugiasluoksnė paralakso scena

Sukurkime klasikinę paralakso antraštę, kur fono paveikslėlis slenka lėčiau nei puslapis, o antraštė išnyksta greičiau.

HTML struktūra:

            <div class="parallax-container">
  <div class="parallax-background"></div>
  <h1 class="parallax-title">Synchronized Motion</h1>
</div>
<div class="content">
  <p>... main page content ...</p>
</div>
            

              
                Copy
              
            
          

CSS įgyvendinimas:

            /* 1. Define a scope for our named timeline */
.parallax-container {
  timeline-scope: --parallax-scene;
  position: relative;
  height: 100vh;
  display: grid;
  place-items: center;
}

/* 2. Define the timeline itself using the container's visibility */
/* The container's journey through the viewport will drive the animations */
.parallax-container {
  view-timeline-name: --parallax-scene;
}

/* 3. Define the keyframes for each layer */
@keyframes move-background {
  to {
    transform: translateY(30vh); /* Moves slower */
  }
}

@keyframes fade-title {
  to {
    opacity: 0;
    transform: scale(0.8);
  }
}

/* 4. Style the layers and hook them to the named timeline */
.parallax-background {
  position: absolute;
  inset: -30vh 0 0 0; /* Extra height to allow for movement */
  background: url('https://picsum.photos/1600/1200') no-repeat center center/cover;
  z-index: -1;

  /* Attach to the shared timeline */
  animation: move-background linear;
  animation-timeline: --parallax-scene;
}

.parallax-title {
  color: white;
  font-size: 5rem;
  text-shadow: 0 0 10px rgba(0,0,0,0.7);

  /* Attach to the same shared timeline */
  animation: fade-title linear;
  animation-timeline: --parallax-scene;
}

            

              
                Copy
              
            
          

Paaiškinimas:

1. `.parallax-container` nustato `timeline-scope` pavadinimu `--parallax-scene`. Tai daro pavadinimą prieinamą jo vaikams.
2. Tada pridedame `view-timeline-name: --parallax-scene;` prie to paties elemento. Tai reiškia, kad laiko juosta pavadinimu `--parallax-scene` bus `view()` laiko juosta, pagrįsta paties `.parallax-container` matomumu.
3. Mes sukuriame dvi skirtingas animacijas: `move-background` subtiliam vertikaliam poslinkiui ir `fade-title` išnykimo ir mastelio keitimo efektui.
4. Svarbiausia, kad tiek `.parallax-background`, tiek `.parallax-title` `animation-timeline` savybė yra nustatyta į `--parallax-scene`.

Dabar, kai `.parallax-container` slenka per peržiūros sritį, jis generuoja vieną eigos reikšmę. Tiek fonas, tiek antraštė naudoja tą pačią reikšmę savo atitinkamoms animacijoms valdyti. Nors jų raktiniai kadrai yra visiškai skirtingi, jų atkūrimas yra idealiai sinchronizuotas, sukuriant vientisą ir įspūdingą vizualinį efektą.

Pažangus sinchronizavimas su `animation-range`

Pavadintos laiko juostos puikiai tinka animacijoms veikti kartu. Bet ką daryti, jei norite, kad jos veiktų paeiliui arba viena animacija įsijungtų tik per tam tikrą kito elemento matomumo dalį? Čia `animation-range` savybių šeima suteikia dar vieną galingo valdymo lygį.

Ne tik nuo 0% iki 100%

Pagal numatytuosius nustatymus, animacija yra priskiriama visai jos laiko juostos trukmei. `animation-range` leidžia jums apibrėžti konkrečius laiko juostos pradžios ir pabaigos taškus, kurie turėtų atitikti jūsų animacijos raktinių kadrų 0% ir 100% taškus.

Tai leidžia jums pasakyti tokius dalykus kaip: "Pradėk šią animaciją, kai elementas pasirodo 20% ekrano, ir baik ją, kai jis pasiekia 50% ribą."

`animation-range` reikšmių supratimas

Sintaksė yra `animation-range-start` ir `animation-range-end`, arba trumpinys `animation-range`.

animation-range: <start-range> <end-range>;

Reikšmės gali būti specialių raktinių žodžių ir procentų derinys. `view()` laiko juostai dažniausiai naudojami raktiniai žodžiai yra:

• entry: Momentas, kai elemento rėmelio kraštas kerta galinį slinkties srities kraštą.
• exit: Momentas, kai elemento rėmelio kraštas kerta pradinį slinkties srities kraštą.
• cover: Apima visą laikotarpį, kai elementas dengia slinkties sritį, nuo momento, kai ją visiškai uždengia, iki momento, kai nustoja.
• contain: Apima laikotarpį, kai elementas yra visiškai slinkties srityje.

Prie jų taip pat galite pridėti procentinius poslinkius, pvz., `entry 0%` (numatytoji pradžia), `entry 100%` (kai elemento apatinis kraštas susitinka su peržiūros srities apatiniu kraštu), `exit 0%` ir `exit 100%`.

Praktinis pavyzdys: nuosekli pasakojimo scena

Sukurkime savybių sąrašą, kuriame kiekvienas elementas paryškinamas, kai slenkate pro jį, naudojant vieną bendrą laiko juostą tobulam koordinavimui.

HTML struktūra:

            <div class="feature-list-container">
  <div class="feature-list-timeline-marker"></div>
  <div class="feature-item">
    <h3>Feature One: Global Reach</h3>
    <p>Our services are available worldwide.</p>
  </div>
  <div class="feature-item">
    <h3>Feature Two: Unbeatable Speed</h3>
    <p>Experience next-generation performance.</p>
  </div>
  <div class="feature-item">
    <h3>Feature Three: Ironclad Security</h3>
    <p>Your data is always protected.</p>
  </div>
</div>
            

              
                Copy
              
            
          

CSS įgyvendinimas:

            /* Define the scope on the main container */
.feature-list-container {
  timeline-scope: --feature-list;
  position: relative;
  padding: 50vh 0; /* Give space for scrolling */
}

/* Use a dedicated empty div to define the timeline's source */
.feature-list-timeline-marker {
  view-timeline-name: --feature-list;
  position: absolute;
  inset: 0;
}

/* Keyframes for highlighting an item */
@keyframes highlight-feature {
  to { 
    background-color: lightgoldenrodyellow;
    transform: scale(1.02);
  }
}

.feature-item {
  width: 80%;
  margin: 5rem auto;
  padding: 2rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  transition: background-color 0.3s, transform 0.3s;

  /* Attach animation and the shared timeline */
  animation: highlight-feature linear both;
  animation-timeline: --feature-list;
}

/* The magic of animation-range for sequencing */
.feature-item:nth-of-type(1) {
  animation-range: entry 5% entry 40%;
}

.feature-item:nth-of-type(2) {
  animation-range: entry 35% entry 70%;
}

.feature-item:nth-of-type(3) {
  animation-range: entry 65% entry 100%;
}

            

              
                Copy
              
            
          

Paaiškinimas:

1. Mes nustatome `--feature-list` apimtį ir sukuriame pavadintą `view()` laiko juostą, susietą su tuščiu žymeklio div, kuris apima visą konteinerį. Ši viena laiko juosta seka viso savybių skyriaus matomumą.
2. Kiekvienas `.feature-item` yra susietas su ta pačia `--feature-list` laiko juosta ir jam suteikiama ta pati `highlight-feature` animacija.
3. Svarbiausia dalis yra `animation-range`. Be jo visi trys elementai paryškėtų vienu metu, kai konteineris slenka į matymo lauką.
4. Vietoj to, mes priskiriame skirtingus diapazonus:
   • Pirmasis elementas animuojasi tarp 5% ir 40% laiko juostos eigos.
   • Antrasis elementas animuojasi 35% iki 70% lange.
   • Trečiasis animuojasi nuo 65% iki 100%.

Tai sukuria malonų nuoseklų efektą. Slenkant, paryškinama pirmoji savybė. Toliau slenkant, ji išblunka, o paryškinama antroji, ir taip toliau. Persidengiantys diapazonai (`entry 40%` ir `entry 35%`) sukuria sklandų perdavimą. Šis pažangus nuoseklumas ir sinchronizavimas pasiekiamas vos keliomis deklaratyvaus CSS eilutėmis.

Našumas ir geriausios praktikos

Nors CSS slinkties animacijos yra neįtikėtinai galingos, svarbu jas naudoti atsakingai. Štai keletas pagrindinių geriausių praktikų pasaulinei auditorijai.

Našumo pranašumas

Pagrindinis šios technologijos privalumas yra našumas. Skirtingai nuo JavaScript pagrįstų slinkties stebėtojų, kurie veikia pagrindiniame gijos sraute (main thread) ir gali būti blokuojami kitų užduočių, CSS slinkties animacijos veikia kompozitoriaus gijos sraute (compositor thread). Tai reiškia, kad jos išlieka idealiai sklandžios net tada, kai pagrindinis srautas yra užimtas. Norėdami maksimaliai išnaudoti šį pranašumą, animuokite savybes, kurias pigiau apdoroti, daugiausia `transform` ir `opacity`.

Prieinamumo aspektai

Ne visi nori ar gali toleruoti judesį tinklalapiuose. Būtina atsižvelgti į vartotojų pageidavimus. Naudokite `prefers-reduced-motion` medijos užklausą, kad išjungtumėte arba sumažintumėte animacijas vartotojams, kurie šį nustatymą įjungė savo operacinėje sistemoje.

            @media (prefers-reduced-motion: reduce) {
  .card,
  .parallax-background,
  .parallax-title,
  .feature-item {
    /* Disable the animations */
    animation: none;
    /* Ensure elements are in their final, visible state */
    opacity: 1;
    transform: none;
  }
}

            

              
                Copy
              
            
          

Naršyklių palaikymas ir atsarginiai sprendimai

Nuo 2023 m. pabaigos CSS slinkties animacijos palaikomos Chromium pagrindu veikiančiose naršyklėse (Chrome, Edge) ir aktyviai kuriamos Firefox ir Safari. Pasaulinei auditorijai turite atsižvelgti į naršykles, kurios dar nepalaiko šios funkcijos. Naudokite `@supports` at-rule taisyklę, kad animacijos būtų taikomos tik ten, kur jos palaikomos.

            /* Default state for non-supporting browsers */
.card {
  opacity: 1;
  transform: translateY(0);
}

/* Apply animations only in supporting browsers */
@supports (animation-timeline: view()) {
  .card {
    opacity: 0; /* Initial state for animation */
    transform: translateY(50px);
    animation: fade-in-up linear;
    animation-timeline: view();
  }
}

            

              
                Copy
              
            
          

Šis laipsniško gerinimo (progressive enhancement) metodas užtikrina funkcionalią patirtį visiems vartotojams, o modernių naršyklių naudotojams suteikia patobulintą, animuotą patirtį.

Derinimo patarimai

Šiuolaikiniai naršyklių kūrėjų įrankiai prideda palaikymą slinkties animacijų derinimui. Pavyzdžiui, Chrome DevTools galite patikrinti elementą ir rasti naują skiltį "Animations" (Animacijos) skydelyje, kuri leidžia matyti laiko juostos eigą ir rankiniu būdu ją peržiūrėti, todėl daug lengviau tiksliai sureguliuoti `animation-range` reikšmes.

Išvada: ateitis priklauso slinkčiai

CSS slinkties animacijos, o ypač galimybė jas sinchronizuoti su pavadintomis laiko juostomis, yra milžiniškas žingsnis į priekį žiniatinklio dizaino ir kūrimo srityje. Mes perėjome nuo imperatyvių, dažnai trapių JavaScript sprendimų prie deklaratyvaus, našaus ir prieinamo CSS pagrįsto požiūrio.

Mes išnagrinėjome pagrindines `scroll()` ir `view()` laiko juostų sąvokas, kurios atitinkamai tvarko puslapio lygio ir elemento lygio eigą. Svarbiau, mes atvėrėme sinchronizacijos galią kurdami bendras, pavadintas laiko juostas su `timeline-scope` ir `view-timeline-name`. Tai leidžia mums kurti sudėtingus, koordinuotus vizualinius pasakojimus, tokius kaip paralakso scenos. Galiausiai, su `animation-range` mes įgijome smulkų valdymą, leidžiantį sekti animacijas ir kurti sudėtingas, persidengiančias sąveikas.

Įvaldę šias technikas, jūs nebe tik kuriate tinklalapius; jūs kuriate dinamiškas, įtraukiančias ir našias skaitmenines istorijas. Plečiantis naršyklių palaikymui, šie įrankiai taps esmine kiekvieno front-end kūrėjo įrankių rinkinio dalimi. Žiniatinklio sąveikos ateitis jau čia, ir ją valdo slinkties juosta.