animáció CSS3
Ma fogunk beszélni erről a titokzatos tárgya, mint animáció. A mi korunkban, ez nem is lehetne inkább sürgető, mivel a modern felületek igényelnek magas fokú interaktivitást és könnyű, hogy pontosan mit lehet tenni az illetékes CSS-animáció.
Animáció CSS3
Mi keyframe (kulcs képkocka)?
Ahhoz, hogy az animáció dolgozott fel kell használni az úgynevezett kulcs képkockák (kulcs frame) - „keyframe”, fordította angolra.
Keyframe hogy meghatározza a helyzetét (állam) az elem egy bizonyos időpontban keretben. Ezért az elem lesz élő és létrehozása kulcskockákat - fontos szerepet az animáció létrehozását.
CSS animáció jön létre két lépésben: létre Kulcsképek (kulcs frame), valamint ezek alkalmazása a szabály.
Nézzük meg a sorrendben.
Kulcskép. regisztrálni kell a következő tervezési CSS:
Bent a kapcsos zárójelek a szó szoros értelmében előírják bármely elemének változás, hogy írja le az akció Kulcsképek. A rendszer segítségével a kulcsszavakat, és adunk böngésző kitűnik, milyen tulajdonságokkal kezdjük az animáció és hogyan mi jellemző rá, és vége.
Miután a kulcsszavakat, és rakjuk a kapcsos zárójelek (nyitás és zárás, természetesen). Ez az, ahol a varázslat kezdődik. A szervezetben, azt írják elő a tulajdonságok, amelyek meghatározzák elemek rá, hogy az animáció, és a test, hogy - az animáció után. Ez egyszerű.
Például, ha azt akarjuk, hogy mozgassa az elemet a jobb 50px 450 képpontos, akkor a kód lenne:
Érdemes megjegyezni, hogy ez csak az érem egyik oldala. Animáció dolgozni, meg kell kötni létre kulcsképkockát a választó is köti ezeket a változásokat. Lehetővé teszi számunkra, hogy csatlakozzon az elem animáció és animáció-tulajdonság, és az animáció-időtartam, amely be van állítva, minden kulcsképkockák egyezik az elemet, és hogy mennyi ideig tart az animáció.
Tegyük fel, hogy szeretnénk alkalmazni ezt a hatást blokkolja .animate (ami természetesen előzetesen regisztrált a jelölésben). Akkor stílus kód így néz ki:
@keyframes m bal: 50 képpont;
>
balra: 450 képpontos;
>
>
.animálhatja szélesség: 50 képpont;
magasság: 50px;
animáció-név: m;
animációs időtartama: 1.5s / * Ha tesszük a szám a „s” (másodperc), vagy „MS” (ezredmásodperc), attól függően, hogy mennyi ideig tart az animáció * /
>
Animációk CSS3 - elég rugalmas és hatékony eszköz, amely képes arra, hogy a statikus oldal szép. teljes mozgás és hatásait. Természetesen, mi fog találkozni egy csomó lehetőség, így - találkozunk a következő részben.
Addig jó szerencsét a webes fejlesztés!