Sisäänrakennetut keyframe-animaatiot
Käyttäkää Tailwindin sisäänrakennettuja animate-spin-, animate-ping-, animate-pulse- ja animate-bounce-luokkia yleisiin lataus- ja huomiota herättäviin animaatioihin.
Sisäänrakennetut keyframe-animaatiot on ilmainen Tailwind 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 Tailwind CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Tailwind CSS Academy-kurssilla on yhteensä 4 oppituntia.
CSS:n keyframe-animaatiot ja siirtymät
CSS-siirtymät animoivat kahden tilan välillä, jotka määritetään alku- ja loppuarvolla. CSS:n keyframe-animaatiot määrittävät useiden tilojen sarjan ja voivat toistua loputtomasti. Tailwind sisältää neljä valmista keyframe-animaatiota animate-*-apuohjelmien kautta. Ne kattavat yleisimmät käyttöliittymän animaatiomallit: latausspinerit, sykkivät skeletonit, huomiota kiinnittävät ping-efektit ja pomppivat ilmaisimet – kaikki ilman mukautettua CSS:ää.
animate-spin
animate-spin pyörittää elementtiä jatkuvasti vakionopeudella – yhden täyden 360 asteen kierroksen sekunnissa. Se on latausspinerien tavallinen apuohjelma. Käyttäkää sitä ympyränmuotoisessa elementissä tai SVG-kuvakkeessa ilmaisemaan keskeneräistä toimintoa. Animaatio toistuu loputtomasti, kunnes luokka poistetaan. Useimmiten sitä käytetään SVG-rengaskuvakkeen kanssa; renkaassa on aukko, joka luo tutun spinerin ulkoasun.
<!-- Loading spinner using animate-spin -->
<svg class="animate-spin h-5 w-5 text-blue-600"
xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
</path>
</svg>
<!-- Button with spinner -->
<button class="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg" disabled>
<svg class="animate-spin h-4 w-4" ...></svg>
Loading...
</button>animate-ping
animate-ping luo väreilyä tai tutkan pyyhkäisyä muistuttavan efektin: elementti suurenee ja häivytetään silmukassa. Sitä käytetään usein ilmoituspisteenä tai aktiivisuuden ilmaisimena staattisen elementin päällä. Ping-efektiä käyttävä elementti kannattaa sijoittaa absoluuttisesti todellisen elementin päälle käyttämällä relative-luokan sisältävää kääre-elementtiä. Efekti kiinnittää katseen ilmoitukseen häiritsemättä liikaa.
<!-- Notification badge with ping effect -->
<div class="relative inline-flex">
<button class="p-2 rounded-full bg-gray-100">
<!-- Bell icon -->
<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</button>
<!-- Ping indicator -->
<span class="absolute top-0 right-0 -mt-0.5 -mr-0.5">
<span class="animate-ping absolute inline-flex h-3 w-3 rounded-full bg-red-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
</span>
</div>animate-pulse
animate-pulse häivyttää elementin peittävyyttä edestakaisin: täydestä peittävyydestä 50 prosenttiin ja takaisin kahden sekunnin silmukassa. Se sopii täydellisesti skeleton-lataajiin, jotka näyttävät sisällön muodon sen latautuessa. Käyttäkää sitä harmaissa paikkamerkkilohkoissa, jotka vastaavat ladattavan sisällön asettelua. Hienovarainen sykkiminen ilmaisee latauksen häiritsemättä käyttäjää.
<!-- Skeleton loader using animate-pulse -->
<div class="p-6 space-y-4">
<!-- Avatar + title skeleton -->
<div class="flex items-center gap-3">
<div class="animate-pulse bg-gray-200 rounded-full h-10 w-10"></div>
<div class="space-y-2 flex-1">
<div class="animate-pulse bg-gray-200 rounded h-4 w-1/3"></div>
<div class="animate-pulse bg-gray-200 rounded h-3 w-1/4"></div>
</div>
</div>
<!-- Content lines skeleton -->
<div class="space-y-2">
<div class="animate-pulse bg-gray-200 rounded h-4 w-full"></div>
<div class="animate-pulse bg-gray-200 rounded h-4 w-5/6"></div>
<div class="animate-pulse bg-gray-200 rounded h-4 w-4/5"></div>
</div>
</div>animate-bounce
animate-bounce liikuttaa elementtiä ylös ja alas pomppivalla liikkeellä. Se käyttää cubic-bezier-ajoitusfunktiota, joka luo luonnollisen hidastumisen jokaisen pompun huipulla. Tavallisia käyttökohteita ovat alaspäin osoittava nuoli, joka kehottaa vierittämään, chat-kuplan kirjoittamisen ilmaisin sekä ilmoituskuvake, joka kiinnittää huomion uuteen sisältöön. Pomppiminen jatkuu oletuksena jatkuvasti.
<!-- Scroll indicator using animate-bounce -->
<div class="flex flex-col items-center gap-2 mt-16">
<p class="text-sm text-gray-500">Scroll to explore</p>
<svg class="animate-bounce w-6 h-6 text-gray-400"
fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</div>
<!-- Typing indicator (three bouncing dots) -->
<div class="flex gap-1 p-3 bg-gray-100 rounded-2xl rounded-tl-none w-16">
<div class="animate-bounce h-2 w-2 bg-gray-400 rounded-full" style="animation-delay: 0ms"></div>
<div class="animate-bounce h-2 w-2 bg-gray-400 rounded-full" style="animation-delay: 150ms"></div>
<div class="animate-bounce h-2 w-2 bg-gray-400 rounded-full" style="animation-delay: 300ms"></div>
</div>Animaatioiden pysäyttäminen animate-none-luokalla
animate-none poistaa elementistä kaikki aktiiviset animaatiot. Tämä on hyödyllistä responsive- tai tilavarianttien kanssa, kun animaatio halutaan poistaa käytöstä tietyissä näyttöko'oissa tai tietyissä tilanteissa. Voitte esimerkiksi käyttää motion-reduce:animate-none-luokkaa kaikkien animaatioiden poistamiseen käytöstä käyttäjiltä, jotka suosivat vähäisempää liikettä, tai pysäyttää latausspinerin tietojen latauduttua vaihtamalla luokkaa JavaScriptillä.
<!-- Stop animation for reduced-motion users -->
<svg class="animate-spin motion-reduce:animate-none h-5 w-5 text-blue-600">
...
</svg>
<!-- Stop animation at large screens -->
<div class="animate-pulse lg:animate-none bg-gray-200 rounded h-4 w-48">
<!-- Only pulses on mobile/tablet, static on desktop -->
</div>
<!-- JavaScript: remove animation when done -->
<!-- spinner.classList.remove('animate-spin'); -->animaten yhdistäminen ehdolliseen renderöintiin
Komponenttipohjaisissa frameworkeissa näytätte yleensä pyörivän tai sykkivän tilan ehdollisesti lataustilan perusteella. Animaatioluokka kuuluu skeleton- tai latauskomponenttiin, joka renderöidään tietoja haettaessa ja korvataan oikealla sisällöllä haun valmistuttua. Näin animaatioihin liittyvät asiat pysyvät lataustilan käyttöliittymässä sen sijaan, että luokkia lisättäisiin ja poistettaisiin ohjelmallisesti.
// React: conditional rendering for loading state
function UserCard({ user, isLoading }) {
if (isLoading) {
return (
<div class="p-6 space-y-3">
<div class="animate-pulse bg-gray-200 rounded-full h-12 w-12"></div>
<div class="animate-pulse bg-gray-200 rounded h-4 w-32"></div>
<div class="animate-pulse bg-gray-200 rounded h-3 w-24"></div>
</div>
);
}
return (
<div class="p-6">
<img src={user.avatar} class="h-12 w-12 rounded-full" />
<p class="font-semibold mt-3">{user.name}</p>
<p class="text-gray-500 text-sm">{user.role}</p>
</div>
);
}Animaation toistokerrat ja täyttötila
Tailwindin valmiit animaatiot toistuvat oletuksena loputtomasti. Jos animaation täytyy toistua tietyn määrän kertoja (kerran sisääntuloanimaatiossa tai kahdesti huomiota herättävässä välähdyksessä), on käytettävä CSS:n mukautettuja ominaisuuksia tai mukautettua animaatioluokkaa. Laajentakaa asetuksissa theme.extend.keyframes- ja theme.extend.animation-määrityksiä, jotta voitte lisätä animaatioita hallituilla toistokerroilla ja täyttötiloilla.
// tailwind.config.js — add a one-shot animation
module.exports = {
theme: {
extend: {
keyframes: {
'shake': {
'0%, 100%': { transform: 'translateX(0)' },
'20%, 60%': { transform: 'translateX(-6px)' },
'40%, 80%': { transform: 'translateX(6px)' },
},
},
animation: {
'shake': 'shake 0.5s ease-in-out 1', // runs once
},
},
},
};
<!-- Usage -->
<input class="animate-shake border-red-500" type="text" placeholder="Shake on error" />Valmiiden animaatioiden porrastaminen
Animaatioviiveiden porrastaminen sisarelementtien välillä luo kiinnostavan vyöryefektin. Tailwindissa ei ole valmista stagger-apuohjelmaa, mutta yksittäiset animation-delay-arvot voi määrittää inline-style-attribuuteilla. Listan kohteiden viiveitä kannattaa siirtää toisiinsa nähden 50–100 ms. Pitäkää porrastuksen kokonaiskesto alle 300 ms:n, jotta käyttäjä ei joudu odottamaan viimeisen kohteen ilmestymistä.
<!-- Staggered skeleton loaders -->
<ul class="space-y-3">
<li class="animate-pulse bg-gray-200 rounded h-12" style="animation-delay: 0ms"></li>
<li class="animate-pulse bg-gray-200 rounded h-12" style="animation-delay: 75ms"></li>
<li class="animate-pulse bg-gray-200 rounded h-12" style="animation-delay: 150ms"></li>
<li class="animate-pulse bg-gray-200 rounded h-12" style="animation-delay: 225ms"></li>
</ul>
<!-- Staggered bounce dots -->
<div class="flex gap-1">
<div class="animate-bounce w-2 h-2 bg-blue-500 rounded-full" style="animation-delay: 0ms"></div>
<div class="animate-bounce w-2 h-2 bg-blue-500 rounded-full" style="animation-delay: 150ms"></div>
<div class="animate-bounce w-2 h-2 bg-blue-500 rounded-full" style="animation-delay: 300ms"></div>
</div>Animaatioiden käyttäminen responsiivisesti
Kuten kaikki Tailwindin apuohjelmat, myös animate-luokat toimivat responsive-etuliitteiden kanssa. Voitte poistaa animaation käytöstä suurilla näytöillä, joilla lataustilaa tarvitaan ehkä vähemmän, tai käyttää eri animaatioita eri breakpoint-pisteissä. Käyttäkää sm:-, md:- ja lg:-etuliitteitä yhdessä animate-none-luokan kanssa animaatioiden asteittaiseen poistamiseen näkymäalueen kasvaessa, jotta käyttökokemus pysyy kevyenä työpöydällä.
<!-- Animate on mobile, static on desktop -->
<div class="animate-pulse md:animate-none bg-gray-200 rounded h-12 w-full">
Pulses on mobile, static on md+ screens
</div>
<!-- Spinner only visible on small screens -->
<svg class="animate-spin sm:hidden h-5 w-5 text-blue-600" ...></svg>
<!-- Use different animations at different breakpoints -->
<div class="animate-bounce md:animate-ping lg:animate-spin h-4 w-4 rounded-full bg-green-500">
Different animation per breakpoint
</div>Todellisen maailman latausmalli
Tuotantolaatuinen latauskokemus yhdistää useita animaatioapuohjelmia. Pääsisältöalue näyttää skeletonin, jonka paikkamerkkilohkoissa käytetään animate-pulse-luokkaa. Tilailmaisimessa käytetään animate-ping-luokkaa. Jos painikkeessa tai otsakkeessa näkyy spinner, spinnerin SVG-elementtiin lisätään animate-spin. Kaikkien animaatioiden pitäisi pysähtyä sisällön latauduttua, ja niiden tilalle pitäisi tulla oikea sisältö ilman häiritsevää hyppäystä.
<!-- Full loading state with multiple animations -->
<div class="border border-gray-200 rounded-xl p-6">
<!-- Status indicator -->
<div class="flex items-center gap-2 mb-4">
<div class="relative">
<span class="animate-ping absolute h-3 w-3 rounded-full bg-blue-400 opacity-75"></span>
<span class="h-3 w-3 rounded-full bg-blue-600 block relative"></span>
</div>
<span class="text-sm text-gray-500">Fetching data...</span>
<svg class="animate-spin h-4 w-4 text-blue-500 ml-auto" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
</svg>
</div>
<!-- Skeleton content -->
<div class="space-y-3">
<div class="animate-pulse h-4 bg-gray-200 rounded w-3/4"></div>
<div class="animate-pulse h-4 bg-gray-200 rounded w-1/2"></div>
<div class="animate-pulse h-4 bg-gray-200 rounded w-5/6"></div>
</div>
</div>Pikatarkistus
Testatkaa ymmärrystänne Tailwindin valmiista keyframe-animaatioista.
Oppitunnin yhteenveto
Tässä oppitunnissa opitte, että animate-spin luo latausspinerit, animate-ping luo ilmoitusten väreilyefektit, animate-pulse luo skeleton-lataajat ja animate-bounce luo pystysuunnassa pomppivia ilmaisimia. Käyttäkää motion-reduce:animate-none-luokkaa animaatioiden poistamiseen käytöstä käyttäjiltä, jotka suosivat vähäisempää liikettä. Seuraavaksi luomme mukautettuja keyframe-animaatioita Tailwindin asetusten avulla.
Opi HTML 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
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”Sisäänrakennetut keyframe-animaatiot” ilmainen?
Kyllä – oppitunnin ”Sisäänrakennetut keyframe-animaatiot” 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 Tailwind CSS Academy-kurssin, päivitä CoddyKit PROhon. Tailwind CSS Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Sisäänrakennetut keyframe-animaatiot”?
Käyttäkää Tailwindin sisäänrakennettuja animate-spin-, animate-ping-, animate-pulse- ja animate-bounce-luokkia yleisiin lataus- ja huomiota herättäviin animaatioihin. Harjoittelet Tailwind CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Tailwind CSS Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Tailwind 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 ”Sisäänrakennetut keyframe-animaatiot”-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ä Tailwind CSS Academy-oppitunnilla?
Kyllä. Jokainen Tailwind 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
- Siirtymäutilityt
- Kesto ja kiihdytys
- Sisäänrakennetut keyframe-animaatiot
- Mukautetut animaatiot config-tiedostossa