Az animationingatlan CSS lehet használni élő sok más CSS tulajdonságok, mint például color, background-color, heightvagy width. Minden animációt meg kell határozni az @keyframesat-szabállyal, amelyet azután a animationtulajdonsággal hívnak meg , például:
.element ( animation: pulse 5s infinite; ) @keyframes pulse ( 0% ( background-color: #001F3F; ) 100% ( background-color: #FF4136; ) )Minden egyes @keyframesszabály meghatározza, hogy mi történjen az animáció bizonyos pillanataiban. Például 0% az animáció kezdete és 100% a vége. Ezeket a kulcskockákat ezután vagy a gyorsírás animationtulajdonságával, vagy annak nyolc altulajdonságával vezérelhetjük, hogy jobban ellenőrizhessük, hogyan kell kezelni ezeket a kulcsképeket.
Résztulajdonságok
animation-name: kijelenti a@keyframesmanipulálandó at-szabály nevét .animation-duration: az animáció egy ciklus befejezéséhez szükséges időtartamaanimation-timing-function: előre beállított gyorsulási görbéket hoz létre, mint példáuleasevagylinear.animation-delay: az elem betöltése és az animáció kezdete között eltelt idő (jó példák).animation-direction: beállítja az animáció irányát a ciklus után. Alapértelmezés szerint minden ciklusban visszaáll.animation-iteration-count: az animáció végrehajtásának száma.animation-fill-mode: az animáció előtt / után alkalmazott értékek beállítása.
Például beállíthatja, hogy az animáció utolsó állapota a képernyőn maradjon, vagy beállíthatja, hogy visszaváltjon az animáció kezdete előtt.animation-play-state: az animáció szüneteltetése / lejátszása.
Ezeket az altulajdonságokat ezután így lehet használni:
@keyframes stretch ( /* declare animation actions here */ ) .element ( animation-name: stretch; animation-duration: 1.5s; animation-timing-function: ease-out; animation-delay: 0s; animation-direction: alternate; animation-iteration-count: infinite; animation-fill-mode: none; animation-play-state: running; ) /* is the same as: */ .element ( animation: stretch 1.5s ease-out 0s alternate infinite none running; )Itt van egy teljes lista arról, hogy az egyes tulajdonságok mely értékeket vehetik fel:
animation-timing-function | könnyedség, könnyítés, könnyítés, könnyítés és kihúzás, lineáris, köbös bezier (x1, y1, x2, y2) (pl. köbös bezier (0,5, 0,2, 0,3, 1,0)) |
animation-duration | X vagy Xms |
animation-delay | X vagy Xms |
animation-iteration-count | x |
animation-fill-mode | előre, hátra, mindkettő, senki |
animation-direction | normális, váltakozó |
animation-play-state | szünetel, fut, fut |
Több lépés
Ha egy animációnak ugyanazok a kezdő és befejező tulajdonságai vannak, akkor érdemes vesszővel elválasztani a 0% és 100% értékeket belül @keyframes:
@keyframes pulse ( 0%, 100% ( background-color: yellow; ) 50% ( background-color: red; ) )Több animáció
Vesszővel elválaszthatja az értékeket, hogy a kijelölőn több animációt is deklarálhasson. Az alábbi példában meg akarjuk változtatni a kör színét egy idő alatt, @keyframemiközben azt is egyik oldalról a másikra csúsztatjuk.
.element ( animation: pulse 3s ease infinite alternate, nudge 5s linear infinite alternate; )Teljesítmény
A legtöbb tulajdonság animálása teljesítményi szempontból fontos, ezért óvatosan kell eljárnunk, mielőtt bármilyen tulajdonságot animálnánk. Vannak azonban bizonyos kombinációk, amelyek biztonságosan animálhatók:
transform: translate()transform: scale()transform: rotate()opacity
Mely tulajdonságok animálhatók?
Az MDN listázza az animálható CSS tulajdonságokat. Az animálható tulajdonságok általában színekre és számokra utalnak. Példa egy nem animálható tulajdonságra background-image.
Böngésző támogatás
Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.
Asztal
| Króm | Firefox | AZAZ | Él | Szafari |
|---|---|---|---|---|
| 4 * | 5 * | 10. | 12. | 5,1 * |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4 * | 6,0–6,1 * |
Több információ
- animáció az MDN-en
- CSS animációk használata
- animáció a W3C-n
- Jank tönkremegy a jobb renderelési teljesítmény érdekében
- Webes animáció a munkahelyen
- Öt módszer a felelősségteljes animációra
- Állami ugrás, negatív késések, származás animálása és egyebek
- A CSS-animációk elindítása félúton
- Nagy teljesítményű animációk