Az Animate.css már néhány éve működik, és be kell vallanom, hogy elég későn vagyok a partira. Csak néhány hónappal ezelőtt fedeztem fel, amikor a neten kerestem néhány CSS-animációs útmutatót, és megtaláltam, hogy a lehető leggyorsabban és legegyszerűbben hogyan lehet animálni az Animate.css-t.
A Dan Eden nevű srác által létrehozott Animate.css egy gyors módja annak, hogy megnézze a CCS működését, és animációt készítsen webhelyén.
Leírva: 'Csak adj hozzá vizet CSS animációnak'. Az Animate.css kissé szórakoztató és komoly oldala. Ez lehetővé teszi még olyan amatőr web-tervezőknek, mint én, hogy gyorsan megismerkedjen a CSS animáció alapjaival, és egyszerű, de hatékony effektusokat hozzon létre a weboldalak számára. Ez az eszköz képes egyetlen animált címsorról az aktívabb mozgásokra.
Animate.css
Az Animate.css letölthető a GitHubból, és lényegében egy helyen összegyűjtött egyszerű CSS effektusok könyvtára. Minden animáció szépen csomagolva és használatra kész. Csak annyit kell tennie, hogy megtalálja a kívánt animációt, és alkalmazza az osztályt. Valójában ennél minden van.
Ha nem akarja, nem kell letöltenie a teljes könyvtárat, mivel 2500 kódsor van benne. Látogasson el az Animate.css webhelyre, keressen egy animációt és kattintson a Letöltés Animate.css linkre. Betölti az osztályt egy weboldalra, ahol másolni és használni tudja, ahogy tetszik.
Ennek ellenére könnyebb használni a GitHub szoftvert, és részletesebben megtalálni a kívánt hatást.
- Keresse meg a css GitHub oldalt.
- Kattintson a Forrás linkre az elemek listájának eléréséhez.
- Válassza ki a kívánt effektus típusát a listából. A Bounce figyelmet keres, tehát válassza ki a attention_seekers linket.
- Válassza a bounce.css lehetőséget.
- Másolja a kódot, és helyezze az oldalra az animáció alkalmazásához.
Valóban annyira egyszerű. Ön nyilvánvalóan különféle lehetőségeket választana a különféle effektusokhoz, de a végeredmény ugyanaz. Hozzáférés a kódhoz, amely az oldal nehéz emelő tevékenységéhez szükséges.
Animált objektum építése az Animate.css segítségével
Az Animate.css segítségével valami hűvös dolgot lehet építeni. Csak a CCS-kód megkeresése és a saját CSS-be történő hozzáadása kérdése. Ha meg tudom csinálni, bárki!
Az Animate.css oldalon az első lehetőség a visszapattanás, tehát használjuk ezt a példában.
- Beillesztés ' ' belül a stíluslapján.
- Keresse meg a kívánt animáció CSS-jét, és adja hozzá az animálni kívánt elemhez. Például adja hozzá a „ ', hogy hozzáadjuk ezt a visszapattanási hatást teszteléshez, egy képhez vagy bármihez.
- Adja hozzá a következő CSS-kódot, hogy mindez működjön. A fenti bounce.css-ből vettük.
@keyframes ugrál {
20% -ról, 53% -ról 80% -ig {
animáció-időzítési funkció: köbös bezier (0, 215, 0, 610, 0, 355, 1, 000);
transzformáció: translate3d (0, 0, 0);
}
40%, 43% {
animáció-időzítési funkció: köbös bezier (0, 755, 0, 050, 0, 855, 0, 060);
transzformáció: translate3d (0, -30 px, 0);
}
70% {
animáció-időzítési funkció: köbös bezier (0, 755, 0, 050, 0, 855, 0, 060);
transzformáció: translate3d (0, -15x, 0);
}
90% {
transzformáció: translate3d (0, -4x, 0);
}
}
.bounce {
animációs név: ugrál;
transzformációs származás: középső alsó;
}
Az animáció továbbfejlesztése az Animate.css segítségével
A fenti sorozat visszapattanási hatást ad az első oldal betöltésekor, ami jó, de egyszeri dolog. Mi lenne, ha hozzáadnánk a lebegéshez. Ily módon, ha valaki lebeg a teszt felett, lepattan. Nem valami, amit megtennék egy produkciós weboldalon, de ez egy nagyszerű módszer annak bemutatására, hogy minden működik.
Adja hozzá a következő kódot a CSS-hez, hogy hozzáadja a lebegő ugráshatást. Amikor az egér az elem fölé vigyáz, az visszafordul.
.animált: lebeg {
-webkit-animáció-időtartam: 1s;
-moz-animáció-időtartam: 1s;
-ms-animáció-időtartam: 1s;
-o-animáció-időtartam: 1 s;
animáció időtartama: 1 s;
-webkit-animáció-fill-mode: mindkettő;
-moz-animáció-kitöltés-mód: mindkettő;
-ms-animáció-kitöltés-mód: mindkettő;
-o-animáció-kitöltés-mód: mindkettő;
animáció-kitöltés-mód: mindkettő;
}
Ha ismeri a CSS-t, akkor sokkal jobban tudni fogsz, mint én, hogy hogyan lehet a különféle tevékenységekre különféle hatásokat végrehajtani. Kezdőként ez és az Animate.css könyvtárak segítenek nekem alapvető, de hatékony animációk létrehozásában a weboldalaimhoz.
Nem tudom, hányat használnék élő weboldalon, mivel ezek nem mindig mennek túl jól, és a mobil felhasználók számára egyáltalán nem tetszik nekik. Ugyanakkor a CSS működésének és az internetes fejlesztésének felhasználásának tanulsága nagyszerű forrás. Csak kezdő vagyok, de még egy pár órát az Animate.css-szel töltve ehhez az oktatóanyaghoz sokat tanítottam. Azt hiszem, még sokat fogok játszani vele, mielőtt kész vagyok. És veled mi van?
