css animáció kezdőknek

Animációs elemeket nem csak, hogy a tervezés egyszerű és elegáns, hanem biztosítja a felhasználók számára a pozitív érzelmek, hogy szó vonzza a helyszínre.

Ennyit az egyéni mutatókat.

Figyelmeztetem - mielőtt veszi a animációs elemeket, meg kell tanulni az alapokat a HTML és CSS

A fő összetevői a CSS animáció - ingatlan átmenet és animáció. és általában @keyframes.

Nézzük meg őket sorrendben.

átmenet

átmenet tulajdonság létrehozásához használt egyszerű animációk, azaz, hogy megteremti a hatása egy átmeneti két tagállam között.

átmenet, viszont lehet osztani négy komponenseket, amelyek mindegyike hat egy specifikus aspektusa az átmeneti hatást.

1. átmenet-tulajdon - meghatározza, hogy az ingatlan lesz animálva. Például, ha az elem kerül át, ez lesz az ingatlan fent, balra, margó stb változtatni a méretét, szélességének vagy magasságának változtatni a színét - .. vagy a háttér színét.

2. Átmeneti-időtartama - a időtartama az átmeneti hatást. Ez másodpercben.

3. átmenet-időzítés funkció - a sebesség az átmenet hatása. Tart a következő értékeket:

enyhíteni - animáció kezdődik lassan, majd gyorsított és lassított újra vége felé;

könnyű in - lassú kezdést és a végén a gyorsított;

kiúsztatás - gyors start, és a végén lelassult;

enyhíteni-in-out - a lassulás elején és végén;

lineáris - állandó sebesség;

harmadfokú Bézier görbe - állítja az összes értéket számszerűsítve. Például könnyű értéket van írva, mint: köbös-Bezier (0.25,0.1,0.25,1).

4. átmenet-késleltetés - a késleltetett indítás az animáció. Meghatározott másodpercben. Mint például animáció lehet kezdeni egy bizonyos időn belül, miután az oldal betöltésekor.

A rövidített változata az animáció felvétel a következő - az átmeneti tulajdonság értéke az összes fenti értékek érdekében egy szóközt.

Egy példa, amikor az elemet mozgatjuk a kurzor azt.

animáció és @keyframes

Az ingatlan animáció és @keyframes általában létrehozásához használt animációs komplexitás.

animáció tulajdonság meghatározza az intézkedés beállításokat az animáció (animáció időtartama, ismétlés, irányát, a mozgás típusa, fokozat), és a blokk maga adott @keyframes animáció lépésről lépésre (változó típusa és elhelyezése)

animáció ingatlan nyolc részből áll:

1. animációs neve - a név az animáció. beállítása önkényesen. Szükségesek ahhoz, hogy meghatározza az animáció @keyframes blokk. mivel számos animációt lehet meghatározni egyetlen elem.

2. animáció-időtartama - időtartamát az animáció másodpercben van megadva (ok) és a milliszekundum (ms).

3. animáció-időzítés funkció - határozza meg az animáció és tart a következő értékeket:

enyhíteni - csúszik;

lineáris - sima mozgást;

kiúsztatás - az elején a gyorsulás;

enyhíteni-in - gyorsulás végén;

enyhíteni-in-out - sima siklás, mint a könnyű

harmadfokú Bézier görbe - állítja a numerikus paraméterek lehetővé teszik megvalósítása bonyolultabb típusú animáció. Egy eszköz kiválasztásának numerikus paramétereket - cubic-bezier.com

lépésről-start és lépésről-végi - meghatározza az animáció lépésről lépésre (count)

lépések - meghatározza a lépések számát, amelyek az animáció (stopper - lépéseket (60) animáció-időtartam -60s) kerül végrehajtásra

4. animációs iterációs-count - meghatározza az ismétlések számát az animáció. Tart az értékeket:

Bármennyi - hányszor az animáció ismétlődés;

végtelen - végtelen ismétlés;

5. animáció-irányban - határozza meg a mozgás irányát. Tart az értékeket:

Normál - a mozgás balról jobbra;

fordított - a mozgás jobbról balra;

alternatív - a teljes ciklus oda-vissza;

alternatív-fordított - egy teljes ciklust, de kezdődik és végződik a végén;

6. animációs play-state - meghatározza az animáció leáll. Tart az értékeket:

futás - Az animációt általában (alapértelmezés);

szünetel - az animáció megáll az első lépés;

7. animáció-delay - megadja a késleltetést, mielőtt az animáció lejátszását. Meghatározva másodpercben (s) és milliszekundum (ms)

8. animáció-fill-mód - lehetővé teszi, hogy játszani az animációt megadott lejátszási időt. Tart az értékeket:

none - animáció csak akkor működik a megadott lejátszási idő, majd visszatér a helyszínre.

előre - animáció után folytatódik a lejátszási időt;

hátra - az animáció kezdődik a lejátszás elindításához;

mind - az animáció fut a kezdet és vége után játékidő;

Néhány ilyen tulajdonságok abszurdnak tűnhet elsőre, de ha létre összetett animációk lehetővé teszik, hogy megvalósítsa a merész kreatív megoldásokat.

Minden tulajdonságok írhatók rövidített formában, megadva az animáció tulajdonság csak az értéküket. Például:

Szabály @keyframes - a második lépés az összetett animációk.

Ezen belül a szabály okoz a szakaszos lejátszás átalakulások történnek az elem.

A gyakorlatban ez a következő: a stíluslap létrehozott @keyframes választó amelybe vannak elhelyezve egymás szelektorok meghatározó elem állapotban.

Például, hogy az elem

, megkérem egy négyzet alakú, a háttér színe, és hogy a színe megváltozik a teljesen átlátszótól a teljesen átlátszatlan.

Selectors van állítva, és egy átalakulás az egyik állapotból a másik elemnek.

De ez sokkal kényelmesebb, hogy meghatározza az állam változás százalékban. Aztán száma szelektor növelhető, és így szakítani a folyamatot nagyobb számú szakaszaiban.

Minden szakaszban lehet beállítani egyidejűleg valami saját. Például időtartama, átnyúló, mérete, stb

Egy példa a megjelenése és eltűnése a tér:

Remélhetőleg az alapokat teremt egyértelmű animáció. Most, hogy tudod, hogy a jellemzők, értékek és eszközök, nyílt Notepad ++ és hozzon létre az egyszerűtől az összetett.

A következő cikkben «CSS mozgó, forgó, 3D» pontosan lássa átalakítás tulajdonság, ami nélkül nem költség, szinte nincs animáció.

Ugyan, mi több érdekes