Animaatioiden ketjuttaminen ja järjestäminen
Luokaa monimutkaisia sarjoja ketjuttamalla useita animaatioita porrastetuilla viiveillä.
Animaatioiden ketjuttaminen ja järjestäminen on ilmainen CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. CSS Academy-kurssilla on yhteensä 4 oppituntia.
Miksi animaatioita ketjutetaan
Monimutkaiset käyttöliittymätehosteet vaativat usein useita peräkkäin tapahtuvia animaatioita: elementti liukuu näkyviin, pysähtyy hetkeksi ja häipyy sitten. CSS tarjoaa useita työkaluja animaatioiden ketjuttamiseen ilman JavaScriptiä.
animation-delay animaatioiden ajoittamisessa
Yksinkertaisin tapa ajoittaa animaatiot on laskea seuraavan animaation alkamisaika edellisen keston perusteella:
<div class="element">Slides in, then fades out</div>
Monivaiheiset keyframet
Yhden elementin tapauksessa selkein lähestymistapa on kuvata koko jakso yhdessä @keyframes-säännössä prosentteina ilmoitettujen välietappien avulla:
<div class="toast">Notification toast</div>
CSS-muuttujat keston määrittämiseen
Tallentakaa kestot CSS-muuttujiin, jotta niiden koordinointi ketjutetuissa animaatioissa on helppoa:
<div class="box">Custom-property-driven timing</div>
animation-timeline (moderni)
Web Animations API ja vieritykseen sidotut animaatiot (ScrollTimeline) mahdollistavat kehittyneen ajoituksen ilman viiveiden laskemista. Ne ovat monimutkaisen CSS-animaatioiden orkestroinnin tulevaisuutta.
CSS-muuttujaan perustuva porrastus
Ohjatkaa porrastusviiveitä CSS-muuttujilla, jotka asetetaan inline-tyylinä tai JavaScriptillä:
<div class="item" style="--delay:0ms">Item 1</div>
<div class="item" style="--delay:120ms">Item 2</div>
<div class="item" style="--delay:240ms">Item 3</div>
JavaScriptillä ohjattu ajoitus
Tarkasti ajoitettuihin usean elementin jaksoihin kannattaa käyttää Web Animations APIa tai GSAP:n kaltaista kirjastoa. CSS:n mahdollisuudet ovat rajalliset, kun toisistaan riippumattomia ja monimutkaisesti toisiinsa liittyviä elementtejä koordinoidaan.
Huomion kiinnittävät animaatiot
Pulssin ja tasaantumisen sisältävä huomion kiinnittävä animaatiojakso:
<div class="notification">New message!</div>
AnimationEnd-tapahtuma
Kuunnelkaa JavaScriptissä animationend-tapahtumaa, jotta voitte käynnistää seuraavan vaiheen ohjelmallisesti:
<div class="box" id="ae-box">Watch me</div>
<script>
const el = document.getElementById('ae-box');
el.addEventListener('animationend', (e) => {
if (e.animationName === 'slideIn') {
el.classList.add('phase-2');
el.textContent = 'animationend fired!';
}
});
</script>
Sivusiirtymän malli
CSS:llä toteutettu sivusiirtymäjakso luokkia vaihtamalla:
<div class="page-leaving">Leaving page</div>
<div class="page-entering">Entering page</div>
Lataustilan skeleton
Monivaiheinen skeleton-latausanimaatio siirtymillä:
<div class="skeleton-text"></div>
<div class="skeleton-text"></div>
<div class="skeleton-text"></div>
Pikatarkistus
Mikä on paras tapa kuvata kokonainen monivaiheinen animaatiojakso yhdelle elementille CSS:ssä?
Kertaus
CSS-animaatioiden ajoituksessa käytetään edellisten kestojen mukaan ajoitettuja viiveitä, prosentteina määritettyjä välietappeja sisältäviä monivaiheisia @keyframes-sääntöjä tai keston määrittäviä CSS-muuttujia. animationend-tapahtuman avulla JavaScript voi käynnistää peräkkäisiä vaiheita. Monimutkaiseen usean elementin orkestrointiin kannattaa harkita Web Animations APIa.
Opi CSS tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 40
- Oppitunnit
- 159
Usein kysytyt kysymykset
Onko oppitunti ”Animaatioiden ketjuttaminen ja järjestäminen” ilmainen?
Kyllä – oppitunnin ”Animaatioiden ketjuttaminen ja järjestäminen” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko CSS Academy-kurssin, päivitä CoddyKit PROhon. CSS Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Animaatioiden ketjuttaminen ja järjestäminen”?
Luokaa monimutkaisia sarjoja ketjuttamalla useita animaatioita porrastetuilla viiveillä. Harjoittelet CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni CSS Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.
Kuinka kauan ”Animaatioiden ketjuttaminen ja järjestäminen”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä CSS Academy-oppitunnilla?
Kyllä. Jokainen CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- @keyframes-syntaksi ja animation-ominaisuus
- Animaation suunta, fill-mode ja toistokerrat
- Animaatioiden ketjuttaminen ja järjestäminen
- Saavutettavat animaatiot prefers-reduced-motionilla