Css animáció • a CSS
css animáció
ingatlan animáció lehetővé teszi, hogy animálni oldalelemek.
Beállítható időtartama animáció, ismétlés, irányát és típusát mozgás lépéseket. Animálhatod olyan elemeket, köztük pszeudo-elemek.
Kötelező követelmény - a jelenlétét konkrét értékeket. Tulajdonságok automatikus értéket nem animált.
Példa animáció kód:
mozog - a név az animáció 15s - időtartama a végtelen - végtelen ismétlése lineáris - a mozgás típusa
@keyframes
Áttetsző @keyframes animáció belül meghatározott a blokk. Miután @keyframes kap a neve az animáció, majd belül a merevítők - lépéseit.
Steps keresztül lehet beállítani érdek vagy a kulcsszavakat, és. A távolban, meg lehet változtatni a típusú animáció (animáció-időzítés-funkció):
Animáció-name
Használt adja meg a nevét az animációt.
A lehetséges értékek közül egy vagy több animáció neveket. Az alapértelmezett érték nincs.
animáció-name: mozog; - egy animáció. animáció-name: mozgás, napfény színű; - Két animációk, neveket vesszővel elválasztva.
Animáció időtartamú
Időtartama animáció vezérli animáció idejű tulajdonság.
Lehetséges értékek: idő másodpercben (s) és ezredmásodperc (ms). Abban az esetben, több animáció ideje mindegyik megadhat egy vesszővel. Kezdeti érték - 0s.
Animáció-időzítés-funkció
Az ingatlan típusát adja animáció.
Sima animáció könnyű - slip (alapértelmezett) lineáris - sima mozgását könnyű in - gyorsuló végén a könnyű ki - a gyorsulás kezdetén könnyű-in-out - sima siklás, mint a könnyű
harmadfokú Bézier görbe (szám, szám, dátum, szám) komplex típusú tudja beállítani az animáció. Értékek kényelmesen dönt, hogy cubic-bezier.com.
Lépésről lépésre lépésről-start animációs és lépésről-end - lehet beállítani átléphető animáció, adjon meg konkrét lépéseket. Ebben az esetben a step-Start változások történnek elején a lépést, és egy lépést végi - a végén.
lépés végén. Ha a step-start. A számláló indul egység.
lépések (szám) - lehetővé teszi, hogy meghatározza a lépések számát, amelyre az animáció is végrehajtható, és csak akkor adja meg az utolsó lépést jelzik közbenső feleslegesen.
Animáció-iterációs-count
Ez vezérli az ismétlés az animációt. Az alapértelmezett érték 1 (az animáció egyszer játssza).
szám - hányszor kell játszani az animációt. végtelen - végtelen ismétlés.
Animáció-irányban
Felelős irányítja az animációt.
Normál - animáció játszik a normális irányban, az elejétől a végéig. hátra - az animáció játszott az ellenkező irányba, vagyis a vége. alternatív - animáció játszott az elejétől a végéig, majd az ellenkező irányba. alternatív-fordított - animáció játsszák a végén, hogy az elején, majd az ellenkező irányba.
Animáció-play-state
Controls lejátszás leállításához és az animáció.
Lehetséges értékek: futás - az animáció lejátszása (alapértelmezett). szüneteltetve - animáció megfagy az első lépés.
Szabályozási lépés, ahol megáll, ez lehetetlen, de akkor megáll az animációt: hover:
Animáció késleltetés
A filmben az animáció-késleltetés beállítható késleltetés mielőtt az animáció lejátszását.
Lehetséges értékek: idő másodpercben (s) és ezredmásodperc (ms). Az értékek lehetnek negatívak. Abban az esetben, több animáció ideje mindegyik megadhat egy vesszővel. Kezdeti érték - 0s.
Animáció-fill-módban
Tulajdonság meghatározza, hogy az animáció befolyásolja az elem idő játszik az animáció.
none - animáció az időjárásnak való kitettség lejátszás közben, miután a tétel vissza az eredeti állapotát. előre - animáció az időjárásnak való kitettség végén a játék. hátra - az animáció hatása a tételt a lejátszás elindításához. mind - az animációs hatás egyik eleme a kezdet és a vég után a játék.
Megtekintheti, hogy visszafelé és mind a munka, hogy elkezd játszani az animációt, a késedelem animáció késleltetés: 3s,. Csak, hogy van értelme, hogy nyissa ki a mintát egy új ablakban.
Mindezek a tulajdonságok lehet írni a gyors-, például:
Becsült értékei - a név az animáció időtartamát. Az első érték az ideiglenes lejátszási ideje, a második - a késés.