Egyszerű CSS animáció segítségével @keyframes
@keyframes
CSS Kulcsképek lehetővé teszi, hogy folyamatosan változnak, és automatikusan, és nem csak válaszul egéreseményeket, mind az átmenet. Használata Kulcsképek lehet változtatni egy adott CSS stílus választó bármely időpontban az állapotváltozás vagy esemény által meghatározott JQuery (például görgetés). Ez a szabály együtt animációs funkció, mellyel az időtartam beállításához, az időzítés funkció, késleltetési és irányát. Tulajdonságok, mint például a transzformáció, ha azok szerepelnek az animáció, bejelentett belül @keyframes szabályokat.
Kezdeni minden szabályt @keyframe kell egy egyedi név:
Ez a név a stílus elemeit az animációs tulajdonság:
A képkockák meghatározott szabályokat, százalékban kifejezve. A százalékok pontok mentén idővonal az animáció, ami be van állítva benne stílus teszi az elem:
Ebben a példában az elem a div elem osztály színe megváltozik a rózsaszín, sárga, végül kék. Ha csak két pontot, akkor a -tól -ig:
Egy példa az alkalmazására ezt az egyszerű szabályt, hogy változtatni a háttér színét a szervezet számára:
ingatlan animáció
Maga @keyframes utasítások nélkül, amelyek meghatározzák az időtartam, az idő függvényében, és az irányt nem csinál semmit. Mindezek utasításokat ugyanúgy működnek, mint az átmenet ingatlan. Mindezek altulajdonsággal lehet állítani egy animációs tulajdon az alábbi szintaxis használatával:
Vagy külön beállítható úgy, hogy a szó animáció előtt minden altulajdonsággal:
... nos, érted.
Nem minden al-tulajdonságok szükségesek, de meg kell írni a megfelelő sorrendben, hogy a böngésző képes megfelelően alkalmazni az időzítés értékét és megkülönböztető neve animációs más kulcsszavakkal. Rövid leírása altulajdonsággal, amit kell:
időtartamára - az időtartam készletek animáció elejétől a végéig;
időzítés-funkció - megadja, hogy az animáció mozgás mentén egy időben „track”, például a könnyű, az egyszerű in, lineáris, stb;
késleltetés - késleltetési idő (ha van ilyen) indul az animáció;
iterációs számlálás - hányszor kell játszani az animációt hurok, akkor az értéke végtelen.
Amellett, hogy a már ismerős számunkra érték (mert az ingatlan átmenet) animáció is vesz irányt, iterációs-szám, play-state és töltse-módban.
Az iterációk száma
Alapértelmezésben az animációt egy ciklus és végződik. A tulajdonság az animáció-iterációs-számlálási érték is megadható, mint számos, azaz hányszor az animáció kell kezdeni. Szintén a kerékpározás, akkor használja a kulcsszó végtelen.
IRÁNY
Altulajdonság animáció-irányban meghatároz egy irányt nem vizuális animáció (pozíció, a kezdeti és a végső állapotban vannak beállítva stílusok), és jelzi a start sorrendben kulcsképek. Altulajdonság vesz értékek normál, fordított, alternatív, és alternatív-fordított.
Jelentés normális animációt játszik az elejétől a végéig. Jelentése elveszti fordított animáció éppen ellenkezőleg, alulról felfelé, a 100% -ról 0%.
Érték alternatív elveszti animáció először előre, majd hátra. A értéke alternate-fordított, először vissza, akkor előre.
feltöltési mód
Altulajdonság animáció-fill-módban adja meg, hogy stílusok előtt vagy után játszik az animáció látható.
Alapesetben (normál) stílusok a kulcs nem befolyásolja az elem előtt vagy után az animációt. Töltsük mód kényelmesebb lehet, ha azt szeretné, hogy fagyassza be a végső állapot az animáció elem, amíg nem történik valami, vagy rögzített drámai visszatérés az elsődleges állami (mint a mi demo háttérszín fent). A leírás az egyes érték:
hátra - stílusok alkalmazásához első keyframe (0%) játszani animációk és késleltetési beállítások;
előre - az utolsó keyframe stílusok (100%) továbbra is aktív játék után az animáció;
Mindkét - a szabályok működnek mindkét hátra és előre.
Az alábbiakban megmutatom, hogyan kell használni a töltési mód, hogy elkerüljük egy éles villogó.
JELENLEGI HELYZET
Állásáról lehet állítani szüneteltetett és fut. Az egyik hasznos alkalmazások play-state -, hogy hozzanak az animáció leáll, ha az egeret. Ha megy vissza az első demo, és mozgassa a kurzort egy mozgó sor, akkor megáll.
Jól jönne animáció: szünetel; vagy animáció-play-állam: szünetel;, hanem felülírja a korábbi érték megváltoztatásával az állam jobb használni a különleges al-tulajdon.
Létrehozása zár hatás, ha az egérmutatót a kép segítségével az animáció és a @keyframes
Ez a példa azt mutatja a hatását „zár”, amikor a kurzor kép a galériában. Ellentétben az egyszerű hatás hover CSS segítségével, ez az átmenet animáció segítségével kulcskockákat fokozatosan változik az ál átláthatóság, átméretezés, és törölje a CSS3 szűrő szürke árnyalat, amely hozzáadódik az összes képet.
Fontos CSS kép konténer és ál, ami fekszik a tetején:
Vegye figyelembe, hogy szűrő elemek vannak telepítve és átlátszóságát. Ezek a tulajdonságok vannak beállítva az alapértelmezett értékek előtt kiváltó animációk.
Most tseplyamem animáció ingatlan egy eseményre, amelyek előidézik az animációt. A legegyszerűbb módja -, hogy egy: hover. Azt is meg egy különleges besorolású meghatározott események jQuery.
Az első keyframe animációt csatolt virágzás idő függvényében könnyű ki-és időtartama 0,75 másodpercre, majd át animáció-fill-modei értékek előre vissza az eredeti stílusát. Így a hatás nem ugrik a hatását a szürke árnyalat. A második kör keyframe animációt csatolt időtartama 0,75 másodperc.
Az animáció virágzás fokozatosan távolítsa el a szűrőt szürkeárnyalatos szerelt ábrán elem (0,8-0). Befejezése után az animáció segítségével a töltési módot tartjuk a 0. Ha nem adja meg az ingatlan, a kép ugrik a kezdeti állapot.
A második körben animációs megváltoztatjuk az átláthatóság egy fél-egy, a változó színe a sárgától a rózsaszín, majd bontsa ki a tételt, és csökkenti a homály, hogy 0-ra.
Ez az alapja létre egyszerű hatása „impulzus” vagy zár. Felhívjuk figyelmét, hogy elválik a átláthatósága RGBA és átlátszóságát tulajdonság!
kész Instruments
Ha megtanulják az alapokat a CSS animáció, azt találjuk, hogy a lehetőségek végtelenek. Még mindig sok nagy könyvtár és eszközök segítségével gyorsan készíthet CSS-animációk. A legjobb eszközök:
ANIMATE.CSS
Egy korábbi cikkben, megmutattam, hogyan kell használni flexbox létre egy elrendezést két részre oszlik, valamint azt, hogyan kell használni a könyvtár animate.css animálni a nyitó oldalon, amelynek tartalma és képek. A Animate.css számos beépített animációkat lehet megtekinteni, és illessze be a projekt egy osztályban. Ezen túlmenően, a könyvtár tanít alkalmazható, és távolítsa osztályok elemeit a jQuery. Olvasd el ezt a cikket megtanulják, hogyan kell kötni az animáció események, mint például kattintással vagy a gombot.
CUBIC BEZIER TOOL
cubic-bezier.com biztosít lenyűgöző vizuális kezelőfelület a saját ideiglenes harmadfokú Bezier funkciókat. Az eredmény látható, valós időben. A kód lehet másolni közvetlenül a stílus.
CSS ANIMATE
Szolgáltatás CSS Animate internetes eszköz lehetővé teszi, hogy létrehoz magas minőségű blokkok keyframe animációt. Vele, akkor gyorsan ugrik a komplex határidőket. Ha még nem ismeri, a Flash, minden úgy néz ki, mint a. Egyszerűen kattintson az idővonal, húzza az elemet a helyzet, meg a tulajdonságait animáció, és ismételje meg az új piacok. Lose ellenőrző kódot, ami után le lehet másolni.
Felülvizsgálat: Team webformyself.
A legtöbb IT hírek és webfejlesztés A csatorna-távirat
