CSS kulcskép -animációk létrehozása

CSS kulcskép -animációk létrehozása

A CSS lehetővé teszi a fejlesztők számára, hogy életre keltsék weboldalukat a kulcsképkockák animációjával.





A CSS animációt úgy érjük el, hogy megváltoztatjuk egy HTML elem kezdeti állapotát különböző tulajdonságain keresztül. Néhány általános animált CSS -tulajdonság:



hogyan lehet eltávolítani az eseményeket az iphone naptárból
  • Szélesség
  • Magasság
  • Pozíció
  • Szín
  • Átlátszatlanság

Ezeket az általános CSS -tulajdonságokat bizonyos CSS -elemek manipulálják a kívánt eredmény létrehozásához. Ha valaha találkozott animált elemmel egy weboldalon, akkor valószínű, hogy az elemet kulcsképkockák animációjával animálták.



Mi az a kulcskeret elem?

Az keyframes elem használható egy vagy több HTML elemen, amelyhez hozzáfér. Ez egy adott pontot azonosít egy elem állapotában, és diktálja az elem megjelenését.

Ez sokat emészthetőnek tűnhet, de valójában nagyon egyszerű. Az keyframes elem meglehetősen egyszerű struktúrával rendelkezik, amely könnyen megérthető és igazítható az animációs követelményekhez.



Példa a kulcskeretek szerkezetére


@keyframes identifier {
from{
/* where you would like the animation to start from. */
}
to{
/* where you would like the animation to end up */
}
}

Tegyük fel, hogy egy zöld téglalap alakú gombot kék kör alakú gombbal szeretne animálni.

A paramétereken belül a tól től A fenti szakaszban el kell helyeznie az összes szükséges stílust, hogy az elem zöld téglalap alakú gombnak tűnjön, majd a nak nek szakaszban minden stíluskövetelményt megad, hogy ezt a gombot kék kerek gombbá alakítsa át.



Ha gondolkodik, ez nem hangzik túlságosan animációnak. Nos, ez azért van, mert ennek az egész folyamatnak egy kulcsfontosságú összetevőjét még be kell vezetni-ez az összetevő az animációs tulajdonság.

Az animációs tulajdonság

Az animációs tulajdonság különböző résztulajdonságokkal rendelkezik; ezeket a fenti kulcsképi struktúrával együtt használják a kívánt HTML elem animálásához.



Azonban csak ötöt kell tudnia ezekből az altulajdonságokból és a hozzájuk tartozó értékekből, hogy animációt érjen el a projektjeiben. Ezeket a tulajdonságokat a következő néven ismerik:

  • Animáció neve
  • Az animáció időtartama
  • Animáció-időzítő funkció
  • Animáció-késleltetés
  • Animáció-iteráció-szám

Animáció használata weblapon

A fenti forgatókönyv használatával a cél egy animált gomb létrehozása.

Példa gomb animációra







Animation

/* styling the button */
.btn{
color:white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation-name: clickButton;
animation-duration: 5s;
animation-delay: 4s;
animation-iteration-count:infinite;
animation-timing-function: ease-in-out;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}




Click!


A fenti kód animációs része tartalmazza a korábban említett öt altulajdonságot. Mindegyik tulajdonságnak nagyon külön funkciója van, és együtt dolgoznak a célzásra szánt HTML elemek animálásán.

Kapcsolódó: Hogyan lehet megcélozni egy weboldal egy részét CSS -választók használatával

Az animációnév tulajdonság

Ez a tulajdonság az egyetlen legfontosabb ingatlan a listán. A nélkül animation-name tulajdonság , nem rendelkezne azonosítóval ahhoz, hogy a keyframes elem , haszontalanná teszi az összes kódot a paraméterein belül.

Ha elfelejtett egy vagy két másik altulajdonságot felvenni, akkor még mindig meglehetősen tisztességes animációval rendelkezhet. Ha azonban elfelejtette a animation-name tulajdonság nincs animációd.

Az animáció időtartama tulajdonság

Ez a tulajdonság határozza meg, hogy egy animált elemnek mennyi időre van szüksége az egyik állapotból a másikba való átálláskor.

A fenti példában a animáció-időtartamú tulajdonság beállítása 5 másodperc (5 másodperc), így a zöld téglalap alakú gombnak összesen 5 másodperce lesz, mire teljesen kék körgomb lesz.

Az Animáció-késleltetés tulajdonság

Ez a tulajdonság egy ok miatt fontos; néhány weboldal teljes betöltése néhány másodpercet vehet igénybe (több különböző tényező miatt). Így a animáció-késleltetés tulajdonság megakadályozza, hogy az animáció azonnal elinduljon, arra az esetre, ha a weboldal betöltése eltarthat egy ideig.

A fenti példában a animáció-késleltetés tulajdonság 4s -re van állítva, ami azt jelenti, hogy az animáció csak a weboldal meglátogatása után 4 másodperccel kezdődik (elegendő időt biztosítva a weboldal betöltéséhez, mielőtt az animáció elkezdődik).

Az Animáció-iteráció-számláló tulajdonság

Ez a tulajdonság azt jelzi, hogy az animált elemnek hányszor kell átállnia egyik állapotból a másikba. Az animáció-iteráció-szám tulajdonság olyan értékeket vesz fel, amelyek szavak és számok. A számérték 1 -től felfelé bármi lehet, míg a szóérték általában végtelen .

A fenti példában a animáció-iteráció-szám érték beállítása végtelen , ami azt jelenti, hogy amíg a weboldal fent van, a gomb tulajdonsága folyamatosan animál egyik állapotból a másikba.

Az Animation-timing-function tulajdonság

Ez a tulajdonság diktálja az animált elem mozgását az egyik állapotból a másikba való átmenet során. Az animation-timing-function tulajdonság általában a három könnyítési érték egyikét rendeli hozzá.

  • Könnyű használat
  • Könnyítés
  • Könnyű ki-be

Az könnyen kivehető érték fent használják; ez lassan átállítja az animációt egyik állapotról a másikra. Ha a cél egy lassú átmenet létrehozása, amikor a gomb zöld téglalapból kék körré alakul, akkor használja a könnyű érték . Ha csak a lassú átmenetet szeretné az ellenkező irányba, akkor használja a könnyítési érték .

Kódexünk csökkentése

A legtöbb esetben a program időtartamának csökkentését gyakorlati megközelítésnek tekintik. Ez főként azért van így, mert kevesebb kódsor csökkenti annak valószínűségét, hogy a hibák észrevétlenek maradnak a programokban.

A fenti kód négy sorral csökkenthető. Ez egyszerűen az animáció tulajdonság használatával érhető el anélkül, hogy minden egyes altulajdonságát kifejezetten azonosítaná.

Példa a gomb animációs kódjának csökkentésére







Animation

/* styling the button */
.btn{
color: white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation: clickButton 5s ease-in-out 4s infinite;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}