CSS-i Kerimispõhiste Animatsioonide Meistriklass: Sügav Sukeldumine Ajajoonte Sünkroniseerimisse

Aastaid on kaasahaaravate, kerimisega seotud animatsioonide loomine veebis olnud JavaScripti pärusmaa. Arendajad on tuginenud teekidele ja keerukatele `requestAnimationFrame` tsüklitele, mis pidevalt kuulavad kerimissündmusi. Kuigi see lähenemine on tõhus, kaasneb sellega sageli jõudlusprobleeme, mis põhjustavad hakkimist ja vähem sujuvat kogemust, eriti vähem võimsatel seadmetel. Tänapäeval on toimumas paradigma muutus, mis viib kogu selle kasutajaliidese disaini kategooria otse brauseri kõrgjõudlusega renderdusmootorisse tänu CSS-i kerimispõhistele animatsioonidele.

See võimas uus spetsifikatsioon võimaldab meil siduda animatsiooni edenemise otse konteineri kerimisasendi või elemendi nähtavusega. Tulemuseks on täiesti sujuvad, GPU-ga kiirendatud animatsioonid, mis on deklaratiivsed, ligipääsetavad ja märkimisväärselt tõhusad. Tõeline loominguline potentsiaal avaneb aga siis, kui liigume üksikute elementide animeerimisest kaugemale ja hakkame orkestreerima mitmeid keerukaid interaktsioone harmoonias. See on animatsioonide sünkroniseerimise kunst.

Selles põhjalikus juhendis uurime CSS-i kerimispõhiste animatsioonide ajajoonte põhimõisteid ja sukeldume sügavale nende sünkroniseerimiseks vajalikesse tehnikatesse. Saate teada, kuidas luua kihilisi parallaksiefekte, järjestikuseid lugu jutustavaid paljastusi ja keerukaid komponendi interaktsioone – kõike seda puhta CSS-iga. Käsitleme:

• Põhimõtteline erinevus `scroll()` ja `view()` ajajoonte vahel.
• Revolutsiooniline nimetatud ajajoonte kontseptsioon mitme elemendi sünkroniseerimiseks.
• Peenreguleeritud kontroll animatsiooni taasesituse üle, kasutades `animation-range`'i.
• Praktilised, reaalsed näited koodiga, mida saate täna kasutada.
• Parimad praktikad jõudluse, ligipääsetavuse ja brauseri ühilduvuse osas.

Valmistuge ümber mõtlema, mis on CSS-iga võimalik, ja tõstke oma veebikogemused uuele interaktiivsuse ja lihvituse tasemele.

Alus: Animatsiooniajajoonte Mõistmine

Enne kui saame animatsioone sünkroniseerida, peame kõigepealt mõistma mehhanismi, mis neid käivitab. Traditsiooniliselt põhineb CSS-animatsiooni ajajoon aja möödumisel, nagu on määratletud selle `animation-duration`'iga. Kerimispõhiste animatsioonidega katkestame selle seose ajaga ja ühendame animatsiooni edenemise hoopis uue allikaga: edenemise ajajoonega.

See saavutatakse peamiselt `animation-timeline` omaduse kaudu. Selle asemel, et lasta animatsioonil pärast käivitamist iseseisvalt joosta, käsib see omadus brauseril kerida läbi animatsiooni võtmekaadrite vastavalt määratud ajajoone edenemisele. Kui ajajoon on 0% juures, on animatsioon oma 0% võtmekaadris. Kui ajajoon on 50% juures, on animatsioon oma 50% võtmekaadris ja nii edasi.

CSS-i spetsifikatsioon pakub nende edenemise ajajoonte loomiseks kahte peamist funktsiooni:

1. `scroll()`: Loob anonüümse ajajoone, mis jälgib kerimiskonteineri (kerija) kerimise edenemist.
2. `view()`: Loob anonüümse ajajoone, mis jälgib konkreetse elemendi nähtavust, kui see liigub läbi vaateava (või mis tahes kerija).

Uurime neid mõlemaid üksikasjalikult, et luua tugev alus.

Süvasukeldumine: `scroll()` Edenemise Ajajoon

Mis on `scroll()`?

`scroll()` funktsioon on ideaalne animatsioonide jaoks, mis peaksid vastama lehe või konkreetse keritava elemendi üldisele kerimise edenemisele. Klassikaline näide on lugemise edenemisriba artikli ülaosas, mis täitub, kui kasutaja lehte alla kerib.

See mõõdab, kui suures ulatuses on kasutaja kerijat kerinud. Vaikimisi jälgib see kogu dokumendi kerimisasendit, kuid seda saab konfigureerida jälgima mis tahes keritavat konteinerit lehel.

Süntaks ja Parameetrid

`scroll()` funktsiooni põhisüntaks on järgmine:

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

Vaatame selle parameetrid lähemalt:

• `<scroller>` (valikuline): See määrab, millise kerimiskonteineri edenemist tuleks jälgida.
  • root: Vaikimisi väärtus. See tähistab dokumendi vaateava kerijat (lehe peamist kerimisriba).
  • self: Jälgib elemendi enda kerimisasendit, eeldusel, et see on kerimiskonteiner (nt sellel on `overflow: scroll`).
  • nearest: Jälgib lähima ülemastme kerimiskonteineri kerimisasendit.
• `<axis>` (valikuline): See määratleb jälgitava kerimistelje.
  • block: Vaikimisi väärtus. Jälgib edenemist plokkteljel (vertikaalne horisontaalsete kirjaviiside, näiteks eesti keele puhul).
  • inline: Jälgib edenemist reateljel (horisontaalne eesti keele puhul).
  • y: Selgesõnaline alias vertikaalteljele.
  • x: Selgesõnaline alias horisontaalteljele.

Praktiline Näide: Lehe Kerimise Edenemisriba

Ehitame selle klassikalise lugemise edenemisindikaatori. See on täiuslik näide `scroll()` funktsioonist selle kõige lihtsamal kujul.

HTML Struktuur:

            <div class="progress-bar"></div>
<article>
  <h1>Pika Artikli Pealkiri</h1>
  <p>... siin on palju sisu ...</p>
  <p>... rohkem sisu, et leht oleks keritav ...</p>
</article>
            

              
                Copy
              
            
          

CSS Implementatsioon:

            /* Määratle edenemisriba võtmekaadrid */
@keyframes grow-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Stiili edenemisriba */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background-color: dodgerblue;
  transform-origin: left; /* Animeeri skaalat vasakult küljelt */

  /* Seo animatsioon kerimise ajajoonega */
  animation: grow-progress linear;
  animation-timeline: scroll(root block);
}

/* Keha põhistiilid demonstratsiooniks */
body {
  font-family: sans-serif;
  line-height: 1.6;
  padding: 2rem;
  height: 300vh; /* Veendu, et kerimisruumi oleks piisavalt */
}
            

              
                Copy
              
            
          

Selgitus:

1. Määratleme lihtsa `grow-progress` animatsiooni, mis skaleerib elementi horisontaalselt 0-st 1-ni.
2. `.progress-bar` on fikseeritud vaateava ülaossa.
3. Maagia toimub kahe viimase omadusega. Rakendame `grow-progress` animatsiooni. Kriitiliselt, selle asemel, et anda sellele kestust (nagu `1s`), seame selle `animation-timeline` väärtuseks `scroll(root block)`.
4. See ütleb brauserile: "Ära esita seda animatsiooni aja jooksul. Selle asemel keri läbi selle võtmekaadrite, kui kasutaja kerib juurdokumenti vertikaalselt (`block` telg)."

Kui kasutaja on lehe kõige ülemises osas (0% kerimise edenemist), on riba `scaleX` 0. Kui ta on kõige alumises osas (100% kerimise edenemist), on selle `scaleX` 1. Tulemuseks on täiesti sujuv edenemisindikaator ilma JavaScripti vajaduseta.

Läheduse Jõud: `view()` Edenemise Ajajoon

Mis on `view()`?

Kui `scroll()` käsitleb konteineri üldist edenemist, siis `view()` käsitleb ühe elemendi teekonda läbi kerija nähtava ala. See on natiivne CSS-i lahendus uskumatult levinud "animeeri ilmumisel" mustrile, kus elemendid hajuvad sisse, libisevad üles või animeeruvad muul viisil ekraanile sisenedes.

`view()` ajajoon algab siis, kui element esimest korda kerimisavas nähtavale ilmub, ja lõpeb siis, kui see on täielikult vaateväljast möödunud. See annab meile 0% kuni 100% ajajoone, mis on otse seotud elemendi nähtavusega, muutes selle ilmumisefektide jaoks uskumatult intuitiivseks.

Süntaks ja Parameetrid

`view()` süntaks on veidi erinev:

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

• `<axis>` (valikuline): Sama mis `scroll()` puhul (`block`, `inline`, `y`, `x`). See määrab, millise kerimisava telje suhtes elemendi nähtavust jälgitakse.
• `<view-timeline-inset>` (valikuline): See on võimas parameeter, mis võimaldab teil kohandada "aktiivse" vaateava piire. See võib aktsepteerida ühte või kahte väärtust (vastavalt algus- ja lõppsisenditele). Saate kasutada protsente või fikseeritud pikkusi. Näiteks `100px 20%` tähendab, et ajajoon loeb vaateava algavaks 100px ülalt ja lõppevaks 20% alt. See võimaldab peenreguleerida, millal animatsioon algab ja lõpeb võrreldes elemendi asukohaga ekraanil.

Praktiline Näide: Sissehajumine Ilmumisel

Loome klassikalise efekti, kus sisukaardid hajuvad ja libisevad nähtavale, kui need ekraanile keritakse.

HTML Struktuur:

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

              
                Copy
              
            
          

CSS Implementatsioon:

            /* Määratle ilmumisanimatsiooni võtmekaadrid */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card {
  /* Rakenda animatsioon igale kaardile */
  animation: fade-in-up linear;
  animation-timeline: view(); /* See ongi kõik! */

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

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

              
                Copy
              
            
          

Selgitus:

1. `fade-in-up` võtmekaadrid määratlevad animatsiooni, mida me tahame: alusta läbipaistvana ja veidi madalamal, lõpeta läbipaistmatuna ja lõplikus asendis.
2. Igale `.card` elemendile rakendatakse see animatsioon.
3. Otsustav rida on `animation-timeline: view();`. See loob unikaalse, anonüümse ajajoone iga kaardi jaoks.
4. Iga üksiku kaardi animatsioon on 0% juures, kui see alles hakkab vaateavasse sisenema, ja jõuab 100% -ni, kui see on just lõpetanud vaateavast lahkumise.

Lehte alla kerides animeerub iga kaart sujuvalt oma kohale täpselt siis, kui see nähtavale ilmub. See saavutatakse vaid kahe CSS-i reaga, mis varem nõudis JavaScripti Intersection Observerit ja hoolikat olekuhaldust.

Põhiteema: Animatsioonide Sünkroniseerimine

Anonüümsete `scroll()` ja `view()` ajajoonte kasutamine on eraldiseisvate efektide jaoks võimas. Aga mis siis, kui tahame, et mitu elementi reageeriksid samale ajajoonele? Kujutage ette parallaksiefekti, kus taustapilt, pealkiri ja esiplaanielement liiguvad kõik erineva kiirusega, kuid on kõik ajendatud samast kerimistoimingust. Või toote pilti, mis muutub, kui kerite mööda selle omaduste loendist.

Siin tulebki mängu sünkroniseerimine ja võti on liikuda anonüümsetelt ajajoontelt nimetatud ajajoontele.

Miks Sünkroniseerida?

Sünkroniseerimine võimaldab luua rikkalikke, narratiivipõhiseid kogemusi. Selle asemel, et olla kogum sõltumatuid animatsioone, saate luua sidusa stseeni, mis areneb kasutaja kerimisel. See on oluline:

• Keerukate Parallaksiefektide jaoks: Sügavustunde loomine, liigutades erinevaid kihte erineva kiirusega ühe kerimiskäivitaja suhtes.
• Koordineeritud Komponendi Olekute jaoks: Keeruka kasutajaliidese komponendi erinevate osade üheaegne animeerimine, kui see vaatevälja keritakse.
• Visuaalseks Loo Jutustamiseks: Elementide paljastamine ja muutmine hoolikalt koreografeeritud järjestuses, et juhtida kasutajat läbi narratiivi.

Tehnika: Jagatud Nimetatud Ajajooned

Sünkroniseerimise mehhanism hõlmab kolme uut CSS-i omadust:

1. `timeline-scope`: Rakendatakse konteinerelemendile. See loob ulatuse, milles teised elemendid saavad leida selles määratletud nimetatud ajajooni.
2. `scroll-timeline-name` / `view-timeline-name`: Rakendatakse elemendile ajajoone loomiseks ja nimetamiseks. Nimi peab olema sidekriipsuga identifikaator (nt `--my-timeline`). Selle elemendi kerimise edenemisest (`scroll-timeline-name`) või nähtavusest (`view-timeline-name`) saab nimetatud ajajoone allikas.
3. `animation-timeline`: Oleme seda varem näinud, kuid nüüd, selle asemel, et kasutada `scroll()` või `view()`, anname sellele oma jagatud ajajoone sidekriipsuga identifikaatori nime (nt `animation-timeline: --my-timeline;`).

Protsess on järgmine: 1. Ülemastme element määratleb `timeline-scope`. 2. Alluv element määratleb ja nimetab ajajoone, kasutades `view-timeline-name` või `scroll-timeline-name`. 3. Iga teine alluv element saab seejärel kasutada seda nime oma `animation-timeline` omaduses, et haakida end sama ajajoonega.

Praktiline Näide: Mitmekihiline Parallaksistseen

Ehitame klassikalise parallaksipäise, kus taustapilt kerib lehest aeglasemalt ja pealkiri hajub kiiremini.

HTML Struktuur:

            <div class="parallax-container">
  <div class="parallax-background"></div>
  <h1 class="parallax-title">Sünkroniseeritud Liikumine</h1>
</div>
<div class="content">
  <p>... lehe põhisisu ...</p>
</div>
            

              
                Copy
              
            
          

CSS Implementatsioon:

            /* 1. Määratle meie nimetatud ajajoone ulatus */
.parallax-container {
  timeline-scope: --parallax-scene;
  position: relative;
  height: 100vh;
  display: grid;
  place-items: center;
}

/* 2. Määratle ajajoon ise, kasutades konteineri nähtavust */
/* Konteineri teekond läbi vaateava juhib animatsioone */
.parallax-container {
  view-timeline-name: --parallax-scene;
}

/* 3. Määratle iga kihi võtmekaadrid */
@keyframes move-background {
  to {
    transform: translateY(30vh); /* Liigub aeglasemalt */
  }
}

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

/* 4. Stiili kihid ja haagi need nimetatud ajajoonega */
.parallax-background {
  position: absolute;
  inset: -30vh 0 0 0; /* Lisakõrgus liikumisruumi jaoks */
  background: url('https://picsum.photos/1600/1200') no-repeat center center/cover;
  z-index: -1;

  /* Kinnita jagatud ajajoonele */
  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);

  /* Kinnita samale jagatud ajajoonele */
  animation: fade-title linear;
  animation-timeline: --parallax-scene;
}

            

              
                Copy
              
            
          

Selgitus:

1. `.parallax-container` loob `timeline-scope` nimega `--parallax-scene`. See muudab nime kättesaadavaks oma lastelelementidele.
2. Seejärel lisame `view-timeline-name: --parallax-scene;` samale elemendile. See tähendab, et ajajoon nimega `--parallax-scene` on `view()` ajajoon, mis põhineb `.parallax-container` enda nähtavusel.
3. Loome kaks erinevat animatsiooni: `move-background` peeneks vertikaalseks nihkeks ja `fade-title` hajumis- ja skaleerimisefektiks.
4. Otsustavalt on nii `.parallax-background` kui ka `.parallax-title` `animation-timeline` omadus seatud väärtusele `--parallax-scene`.

Nüüd, kui `.parallax-container` kerib läbi vaateava, genereerib see ühe edenemisväärtuse. Nii taust kui ka pealkiri kasutavad seda sama väärtust oma vastavate animatsioonide juhtimiseks. Kuigi nende võtmekaadrid on täiesti erinevad, on nende taasesitus täiuslikult sünkroniseeritud, luues sidusa ja muljetavaldava visuaalse efekti.

Täiustatud Sünkroniseerimine `animation-range`'iga

Nimetatud ajajooned on fantastilised animatsioonide üheaegseks esitamiseks. Aga mis siis, kui soovite, et need esitataks järjestikku või et üks animatsioon käivituks ainult teise elemendi nähtavuse kindla osa ajal? Siin pakub `animation-range` omaduste perekond veel ühe võimsa kontrollikihi.

Enamat kui 0% kuni 100%

Vaikimisi on animatsioon kaardistatud oma ajajoone kogu kestusele. `animation-range` võimaldab teil määratleda ajajoone konkreetsed algus- ja lõpp-punktid, mis peaksid vastama teie animatsiooni võtmekaadrite 0% ja 100% punktidele.

See võimaldab teil öelda näiteks: "Alusta seda animatsiooni, kui element siseneb 20% ekraanist, ja lõpeta see selleks ajaks, kui see jõuab 50% märgini."

`animation-range` Väärtuste Mõistmine

Süntaks on `animation-range-start` ja `animation-range-end`, või lühend `animation-range`.

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

Väärtused võivad olla kombinatsioon erimärksõnadest ja protsentidest. `view()` ajajoone puhul on kõige levinumad märksõnad:

• entry: Hetk, mil elemendi piirjoon ületab kerimisava lõpuserva.
• exit: Hetk, mil elemendi piirjoon ületab kerimisava algusserva.
• cover: Hõlmab kogu perioodi, mil element katab kerimisava, alates hetkest, mil see selle täielikult katab, kuni hetkeni, mil see lakkab.
• contain: Hõlmab perioodi, kus element on täielikult kerimisava sees.

Saate neile lisada ka protsentuaalseid nihkeid, nagu `entry 0%` (vaikimisi algus), `entry 100%` (kui elemendi alumine serv kohtub vaateava alumise servaga), `exit 0%` ja `exit 100%`.

Praktiline Näide: Järjestikune Loo Jutustamise Stseen

Loome funktsioonide loendi, kus iga element tõstetakse esile, kui sellest mööda kerite, kasutades täiusliku koordineerimise jaoks ühte jagatud ajajoont.

HTML Struktuur:

            <div class="feature-list-container">
  <div class="feature-list-timeline-marker"></div>
  <div class="feature-item">
    <h3>Esimene Funktsioon: Globaalne Ulatus</h3>
    <p>Meie teenused on saadaval üle maailma.</p>
  </div>
  <div class="feature-item">
    <h3>Teine Funktsioon: Ületamatu Kiirus</h3>
    <p>Kogege järgmise põlvkonna jõudlust.</p>
  </div>
  <div class="feature-item">
    <h3>Kolmas Funktsioon: Raudkindel Turvalisus</h3>
    <p>Teie andmed on alati kaitstud.</p>
  </div>
</div>
            

              
                Copy
              
            
          

CSS Implementatsioon:

            /* Määratle ulatus peamises konteineris */
.feature-list-container {
  timeline-scope: --feature-list;
  position: relative;
  padding: 50vh 0; /* Anna kerimisruumi */
}

/* Kasuta spetsiaalset tühja div-i ajajoone allika määratlemiseks */
.feature-list-timeline-marker {
  view-timeline-name: --feature-list;
  position: absolute;
  inset: 0;
}

/* Võtmekaadrid elemendi esiletõstmiseks */
@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;

  /* Kinnita animatsioon ja jagatud ajajoon */
  animation: highlight-feature linear both;
  animation-timeline: --feature-list;
}

/* animation-range'i maagia järjestamiseks */
.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
              
            
          

Selgitus:

1. Loome `--feature-list` ulatuse ja nimetatud `view()` ajajoone, mis on seotud tühja marker-div'iga, mis hõlmab kogu konteinerit. See üks ajajoon jälgib kogu funktsioonide sektsiooni nähtavust.
2. Iga `.feature-item` on seotud sama `--feature-list` ajajoonega ja talle on antud sama `highlight-feature` animatsioon.
3. Otsustav osa on `animation-range`. Ilma selleta tõstetaks kõik kolm elementi esile samaaegselt, kui konteiner vaatevälja keritakse.
4. Selle asemel määrame erinevad vahemikud:
   • Esimene element animeerub ajajoone edenemise 5% ja 40% vahel.
   • Teine element animeerub 35% kuni 70% aknas.
   • Kolmas animeerub 65% kuni 100%.

See loob meeldiva järjestikuse efekti. Kerides tõstetakse esile esimene funktsioon. Kerimist jätkates hajub see tagasi, samal ajal kui teine tõstetakse esile, ja nii edasi. Kattuvad vahemikud (`entry 40%` ja `entry 35%`) loovad sujuva ülemineku. See täiustatud järjestamine ja sünkroniseerimine saavutatakse vaid mõne deklaratiivse CSS-i reaga.

Jõudlus ja Parimad Praktikad

Kuigi CSS-i kerimispõhised animatsioonid on uskumatult võimsad, on oluline neid vastutustundlikult kasutada. Siin on mõned peamised parimad praktikad globaalsele publikule.

Jõudluse Eelis

Selle tehnoloogia peamine eelis on jõudlus. Erinevalt JavaScripti-põhistest kerimiskuulajatest, mis töötavad põhilõimes ja mida võivad blokeerida muud ülesanded, töötavad CSS-i kerimispõhised animatsioonid komposiitori lõimes. See tähendab, et need jäävad siidiselt sujuvaks isegi siis, kui põhilõim on hõivatud. Selle eelise maksimeerimiseks animeerige peamiselt omadusi, mida on odav kompositeerida, peamiselt `transform` ja `opacity`.

Ligipääsetavuse Kaalutlused

Mitte kõik ei soovi ega talu liikumist veebilehtedel. On ülioluline austada kasutajate eelistusi. Kasutage `prefers-reduced-motion` meediapäringut, et keelata või vähendada oma animatsioone kasutajatele, kes on selle seade oma operatsioonisüsteemis lubanud.

            @media (prefers-reduced-motion: reduce) {
  .card,
  .parallax-background,
  .parallax-title,
  .feature-item {
    /* Keela animatsioonid */
    animation: none;
    /* Veendu, et elemendid on oma lõplikus, nähtavas olekus */
    opacity: 1;
    transform: none;
  }
}

            

              
                Copy
              
            
          

Brauseri Tugi ja Varulahendused

2023. aasta lõpu seisuga toetavad CSS-i kerimispõhiseid animatsioone Chromiumi-põhised brauserid (Chrome, Edge) ning neid arendatakse aktiivselt Firefoxis ja Safaris. Globaalse publiku jaoks peate arvestama brauseritega, mis seda funktsiooni veel ei toeta. Kasutage `@supports` at-reeglit animatsioonide rakendamiseks ainult seal, kus neid toetatakse.

            /* Vaikimisi olek mittetoetavatele brauseritele */
.card {
  opacity: 1;
  transform: translateY(0);
}

/* Rakenda animatsioone ainult toetavates brauserites */
@supports (animation-timeline: view()) {
  .card {
    opacity: 0; /* Animatsiooni algolek */
    transform: translateY(50px);
    animation: fade-in-up linear;
    animation-timeline: view();
  }
}

            

              
                Copy
              
            
          

See progresseeruva täiustamise lähenemine tagab funktsionaalse kogemuse kõigile kasutajatele, pakkudes täiustatud, animeeritud kogemust neile, kes kasutavad kaasaegseid brausereid.

Silumise Nõuanded

Kaasaegsed brauseri arendustööriistad lisavad tuge kerimispõhiste animatsioonide silumiseks. Näiteks Chrome'i DevTools'is saate elementi inspekteerida ja leida "Animations" paneelilt uue jaotise, mis võimaldab teil näha ajajoone edenemist ja seda käsitsi läbi kerida, muutes `animation-range` väärtuste peenhäälestamise palju lihtsamaks.

Kokkuvõte: Tulevik on Kerimispõhine

CSS-i kerimispõhised animatsioonid, ja eriti võime neid sünkroniseerida nimetatud ajajoontega, kujutavad endast monumentaalset sammu edasi veebidisainis ja -arenduses. Oleme liikunud imperatiivsetelt, sageli habrastelt JavaScripti lahendustelt deklaratiivsele, jõudluspõhisele ja ligipääsetavale CSS-natiivsele lähenemisele.

Oleme uurinud `scroll()` ja `view()` ajajoonte aluskontseptsioone, mis käsitlevad vastavalt lehe- ja elemenditasandi edenemist. Veelgi olulisem on see, et oleme avanud sünkroniseerimise võimsuse, luues jagatud, nimetatud ajajooni `timeline-scope` ja `view-timeline-name` abil. See võimaldab meil ehitada keerukaid, koordineeritud visuaalseid narratiive nagu parallaksistseenid. Lõpuks oleme `animation-range`'iga saanud granulaarse kontrolli animatsioonide järjestamiseks ja keerukate, kattuvate interaktsioonide loomiseks.

Nende tehnikate valdamisega ei ehita te enam lihtsalt veebilehti; te loote dünaamilisi, kaasahaaravaid ja jõudluspõhiseid digitaalseid lugusid. Kuna brauserite tugi jätkuvalt laieneb, saavad need tööriistad iga esiotsa arendaja tööriistakasti oluliseks osaks. Veebiinteraktsiooni tulevik on siin ja see on ajendatud kerimisribast.