Átmenetek és animációk, webreference
Használata CSS3 átmenetek, megvan a lehetősége, hogy módosítsa a megjelenését és viselkedését egy elem, ha változás áll be a státuszát, például akkor, ha egy elem lebeg a kurzor, tart a hangsúly, ez lesz az aktív elemet vagy egy átmeneti link.
Animáció CSS3 lehetővé teszi, hogy módosítsa a megjelenését és viselkedését az elem néhány kulcskockákat. Transitions olyan változás az egyik állapotból a másikba, míg az animáció létrehozása több pont az átmenet a különböző kulcskockákat.
Mint már említettük, az átmenet zajlott a termék kapjon állapotváltozás és minden állam különböző stílusok kell meghatározni. A legegyszerűbb módja, hogy stílusok különböző államok - az, hogy az ál-osztályok: hover. összpontosítani. és aktív: target.
Négy tulajdonságokkal kapcsolatos átmenetek általában ez az átmenet-tulajdonság. átmenetifém-időtartam. átmenet-időzítés-funkciót, és átmenetifém-késleltetés. Nem mindegyikük létrehozásához szükséges az átmenet, a legnépszerűbb az első három.
Az alábbi példában a blokk változtatni a háttér színét egy második lineáris módon.
demonstrációs átmenet
eladó változat előtagok
A fenti kód, mint a többi kódmintákat ebben az osztályban nem használja az eladóval változat előtagokat. Ezt úgy tehetjük meg fog annak érdekében, hogy megőrizzék egy kis darab kódot, és világos. A legjobb támogatási minden böngészőben előtagot. Referenciaként a változat a prefix a fenti kód a következő.
átmenet-tulajdonság
Transition-tulajdonság tulajdonság meghatározza, mely tulajdonságokat fog változni együtt más átmeneti tulajdonságai. Alapértelmezésben a változás lesz, az ingatlanok különböző államokban. Azonban csak az előírt tulajdonságok értékének átmeneti vagyoni hatással lesz minden átmenet.
A fenti példában, a háttér tulajdonság meghatározott értékének átmenet-tulajdonság. Itt a háttérben - egy egyedülálló sajátossága, hogy változni fog 1 másodpercen belül lineáris módon. Bármely más tulajdonságok az alábbiak, amikor az elem állapotot vált, de nem adtunk az értéke az átmenet-tulajdonság. nem kapnak átmeneti viselkedése, ahogyan a tulajdonságait az átmenet-időtartam vagy átmenetifém-időzítés-funkciót.
Ha azt szeretnénk, hogy adjunk több ingatlan az átmenet, akkor lehet vesszővel elválasztva értéken belüli átmenet-tulajdon. Ezenkívül arra is lehet használni az összes kulcsszó átmenet az összes elem tulajdonságait.
Kimutatása átmenet-tulajdonság
Tulajdonságok átmenetek
Fontos megjegyezni, hogy nem minden ingatlan áttelepítését. de csak tulajdonságokat, amelyek észrevehető pont félúton. Színek, betűméret, stb léphet az egyik érték a másikra, mivel felismerték az érték az intervallumon egymástól. Az ingatlan kijelzőn. például az átmenet nem lehet, mert nincs középpont. A készlet a legnépszerűbb funkciók, amelyekre alkalmazzuk a következő átmenetet.
átmenetifém-időtartam
Az időtartam a átmenet által meghatározott tulajdonságai átmenetifém-időtartam. A tulajdonság értéke lehet használni az alapvető idő értékek, beleértve a másodperc (s) és ezredmásodperc (ms). Ezek az időpontok értékeket is be lehet állítani, és a frakcionált - .2s, például.
Amikor több ingatlan megadhatja több hosszúságban, egy-egy tulajdonság. Akárcsak a vagyoni értékű átmenet-tulajdon. különböző hosszúságú lehet deklarálni vesszővel elválasztva. A rend meghatározása szempontjából fontos értékek ezek egyedi tulajdonságait és időtartamát. Például, az első ingatlan meghatározott átmenetifém-tulajdonság. Ez egybeesik az első érték az átmeneti idejű tulajdonság, és így tovább.
Ha több tulajdonság az átmeneti számla csak egy értéket időtartamát, hogy kérni fogja az összes időtartama az átmenet tulajdonságait.
Kimutatása átmenetifém-időtartam
átmeneti függvény
Az ingatlan átmenet-időzítés-funkció állíthatja be a sebességet, amellyel az átmenet mozog. Ismerve a hossza az átmenet-időtartama tulajdonságok az átmenet lehet több sebességgel belül időtartamát. Néhány a legnépszerűbb kulcsszó tulajdonságok értékeit az átmenet-időzítés-funkció például a lineáris. könnyű az. könnyű, és könnyű ki-be.
Érték határozza meg az átmeneti egyenes mozgó állandó sebességgel az egyik állapotból a másikba. Value könnyű az határozza meg, az átmenet, hogy lassan indul, és felgyorsítja az átállás során, míg a könnyű-out érték határozza meg az átmenetet, hogy elindul a gyors és lassítja az átmenet során. Jelentés a könnyű-in-out meghatározza az átmenet kezd lassan gyorsul a középső, majd lelassul ismét vége előtt.
Minden az idő függvényében érdemes egy harmadfokú Bezier görbe, ami megadhatja az értékeket az harmadfokú Bézier görbe (x1, y1, x2, y2). További értékek közé step-start. lépés-stop érték és lépések (<число шагов>, <направление>).
Amikor több ingatlan megadhatjuk több funkciót és az időt. Ezek az értékek, mint a többi érték az átmeneti tulajdonságokat lehet be egy vesszőt.
Kimutatása az átmenet függvény
átmenetifém-késleltetés
Kimutatása átmenetifém-késleltetés
Rövid tulajdonság átmenet
Írása egyes átmeneti tulajdonságai önmagában kifejteni, különösen előtagokkal. Szerencsére, van egy rövid tulajdonság átmenet. tudja támogatni ezeket a különböző tulajdonságok és értékek. Egy egyetlen értéket átmenetet. beállíthatja az egyes ág értéke a következő sorrendben: átmenet-tulajdon. átmenetifém-időtartam. átmenet-időzítés-funkciót, és végül, átmeneti késleltetés. Ne használjon vesszőt ezekkel az értékekkel, ha azt szeretnénk, hogy nem több, mint egy konverziót.
Hogy meghatározza többszöri átmenet egyszerre, válassza ki az egyes csoportok az átmenet értékeit, majd egy vesszőt minden további csoportját értékeket.
Kimutatása tulajdonságai átmenet
lenyűgöző gomb
Transitions nem a legtöbb munkát a teremtés vizuális kölcsönhatások az egyik állapotból a másikba, és ideális az ilyen típusú egyetlen állapota megváltozik. Azonban, ha azt szeretnénk, több ellenőrzés, meg kell, hogy átmenet néhány állam. Ettől a pillanattól kezdve átmenet megy, de jön az animáció.
animáció Kulcsképek
Telepíteni több pontján, ahol a tárgy kell, hogy az átmenet szabályt használjuk @keyframes. Ez általában magában foglalja a nevét az animáció, bármennyi ellenőrzési pontok, valamint a tulajdonságok birtokában az animációt.
Szállító változat előtétek @keyframes szabály
Szabály @keyframes legyen az eladóval változat előtagokat, valamint minden egyéb tulajdonságok átmenet és az animáció. Prefixumokat @keyframes az alábbiak szerint:
A fenti animációt nevezzük dia. állapotban indul felnyitása után azonnal @keyframes szabályokat. Egyéb ellenőrzési pont van megadva a kulcs használatával keretek százalékkal, kezdve 0% és a munka akár 100%, a közbenső pont 50%. Kívánt esetben a kulcsszavakat, és hogy kell használni, hanem a 0% és 100%. Amellett, hogy 50% -os is lehet adni extra ellenőrző pontokon. Tulajdonságok animációs felsorolt elemeket az egyes ellenőrzési pont, a bal és a felső a fenti példában.
Bemutató keyframe animációt
Vigyük a kurzort a labdát lenti animáció akcióban.
animáció-name
Miután kijelentette Kulcsképek animálni kell őket az elemhez. Ez használ animáció-name tulajdonság a neve az animáció @keyframes szabályokat. mint egy ingatlan értékét. animáció-name nyilatkozatot, akkor az elem, amelyre az animáció be kell állítani.
Használata egy tulajdonság animáció név tehát nem elegendő. Ezen kívül meg kell állapítsa az animáció idejű tulajdonság és értéke a böngésző számára, hogy meddig kell tartania befejezéséig az animációt.
animáció-hosszára, idejére funkció és animációs késleltetés
Miután kijelentette, animáció-tulajdonság egy elem, az animáció úgy viselkedik, mint átmeneteket. Ez magában foglalja a időtartamát, és egy késleltetési funkciót, amikor a kívánt. Első animációs igényel hosszú deklarálni az ingatlan animációs időtartamát. Mivel abban az esetben, az átmenetet, az időtartam lehet meghatározni másodperc vagy milliszekundum.
az idő függvényében, és a késedelem lehet jelentik be tulajdonságok animáció-időzítés-funkció és animációs-késleltetés. volt. Az értékek ezen tulajdonságok utánozni, és úgy viselkednek, ugyanúgy ahogy azt a átmeneteket.
Az alábbi animáció kell kiváltania a fellendülés a labdát, ha mozgatni a jobb, de csak akkor, ha fölé viszi színpadra.
demonstrációs animáció
Vigyük a kurzort a labdát lenti animáció akcióban.
Egyedi animáció
Animáció is kínál lehetőséget a további egyéni viselkedését az elem, beleértve a lehetséges megadni, hogy hány alkalommal az animáció történik, valamint az irányt, ahol az animáció befejeződött.
animáció-iterációs-count
Alapértelmezésben az animáció megkezdi ciklus egyszer elejétől a végéig, majd megáll. Az animáció ismétlődik újra és újra fel lehet használni animációs film-iterációs-szám. Értékek neki tartoznak egész vagy kulcsszó végtelen. Segítségével számos animációs meg kell ismételni, ahányszor jelzett, míg a kulcsszó végtelen animáció ismétli a végtelenségig, és soha nem hagyja abba.
Bemutató animáció-iterációs-count
Vigyük a kurzort a labdát lenti animáció akcióban.
animáció-irányban
Amellett, hogy képes meghatározni, hogy hányszor az animáció ismétli, akkor is nyilvánítja az irányt, ahol az animáció befejeződött, a tulajdonságok használatával animációs irányban. Értékei az ingatlan tartalmazza a normál. visszafordítani. alternatív, és alternatív-fordított.
Rendes érték átveszi az animáció rendeltetésszerűen az elejétől a végéig. Az érték a fordított animációs játszik éppen az ellenkezője, mint amit megadott @keyframes szabályt. Így, kezdve 100% és visszafelé haladva a 0%.
Az érték reprodukálni animáció alternatív előre, majd hátra. A kulcsképek ez hajtunk végre előre 0% -tól 100%, majd 100% -ról 0% a fordított irányban. A filmben az animáció-iterációs-száma tulajdonság korlátozza a száma, ahányszor az animáció fut oda-vissza. Az eltolás értéke 1, ha animáció felől előre terjed ki 0% és 100%, majd 1-et adunk, amikor az animáció történik fordított sorrendben 100% -ról 0%. Ötvözi összesen két iteráció. Jelentése is invertálja alternatív funkciók bármikor a lejátszás során a fordított irányban. Ha az animációs használ könnyű érték lesz 0% -tól 100% -ot, akkor használja a könnyű-out érték megy 100% -tól 0%.
Végül, alternatív-fordított értéket kombinálja mindkét érték alternatív és fordított. animáció elindításához vissza, majd előre. Alternatív-fordított értéket kezdődik 100% és 0% végzik, majd vissza a 100%.
Bemutató animáció-irányban
Vigyük a kurzort a labdát lenti animáció akcióban.
animáció-play-state
Az ingatlan animáció-play-állam lehetővé teszi animáció leállításához lejátszás vagy szünet, kulcsszavak segítségével futás és megállt. volt. Az animáció eltávolítjuk a szünet után folytatja a jelenlegi állapot, és nem indul újra az elejétől.
Az alábbi példában, animáció-play-állami tulajdon szünetel, ha a színpad akkor aktív, ha a felhasználó rákattint. Megjegyezzük, hogy az animáció miatt átmenetileg szünetel, amíg fel nem engedi az egérgombot.
Bemutató az animáció-play-state
Vigyük a kurzort a labdát lenti animáció akcióban. Kattintson az animáció leáll.
animáció-fill-módban
Az ingatlan animáció-fill-módban részletezi, hogy milyen tételt kell stilizált - előtt, után, vagy megkezdése előtt és után az animációt. Az ingatlan animáció-fill-módban veszi a négy kulcsszó értékeinek, köztük semmi. előre. hátra, illetve mindkettő.
Value sem nem vonatkoznak azok a stílusok, hogy az elem előtt vagy után az animáció fut.
Jelentés előre megtartják stílusok bejelentett múlt kulcsképkocka. Ezek a stílusok azonban befolyásolhatja ingatlan értékének animáció irányban és animáció-iteráció-szám. változik, ha az animáció véget ér.
Jelentés visszafelé kell alkalmazni stílusok meghatározott első keyframe az animációs fog futni. Ez magában foglalja az ilyen stílust az egész idő alatt, hogy lehet beállítani az animáció késleltetés. Jelentése visszafelé is függhet a értékét egy ingatlan animáció-irányba.
Végül állítsd be mindkét alkalmazni viselkedését közvetlenül az értékek mind előre és hátra.
Bemutató animáció-fill-módban
Vigyük a kurzort a labdát lenti animáció akcióban. Kattintson az animáció leáll.
Rövid tulajdonság animáció
demonstrációs animáció
Vigyük a kurzort a labdát lenti animáció akcióban. Kattintson az animáció leáll.