Animate.css je už několik let a já musím připustit, že jsem na stranu docela pozdě. Objevil jsem to teprve před pár měsíci, když jsem hledal síť pro nějaké animační návody CSS a našel, co musí být nejrychlejší a nejjednodušší způsob, jak animovat, Animate.css.
Vytvořil člověk jménem Dan Eden, Animate.css je rychlý způsob, jak zjistit, jak funguje CCS, a získat na svém webu nějakou animační akci.
Popisuje se jako „Just-add water CSS animation“ Animate.css je trochu legrace s vážnou stránkou. Umožňuje i amatérským webovým designérům, jako jsem já, rychle zvládnout základy animace CSS a vytvářet jednoduché, ale efektivní efekty pro webové stránky. Od jediného animovaného nadpisu po více zapojené pohyby to dokáže tento nástroj.
Animate.css
Animate.css je k dispozici ke stažení z GitHubu a je to v podstatě knihovna jednoduchých efektů CSS shromážděných na jednom místě. Každá animace je pěkně zabalena a připravena k použití. Vše, co musíte udělat, je najít animaci, která se vám líbí, a použít třídu. To je opravdu všechno.
Nemusíte stahovat celou knihovnu, pokud ji nechcete, protože v ní je 2500 řádků kódu. Můžete navštívit web Animate.css, najít animaci a kliknout na odkaz Stáhnout Animate.css. Načte třídu na webovou stránku, abyste ji mohli zkopírovat a použít, jak uznáte za vhodné.
Je však snazší použít GitHub a procházením dolů najít efekt, který hledáte.
- Přejděte na stránku css GitHub.
- Klepnutím na odkaz Zdroj otevřete seznam prvků.
- Ze seznamu vyberte požadovaný efekt. Bounce je hledačem pozornosti, takže vyberte odkaz pozornost_seekers.
- Vyberte bounce.css.
- Chcete-li použít animaci, zkopírujte kód a umístěte jej na svou stránku.
Je to opravdu tak jednoduché. Samozřejmě byste vybrali různé možnosti pro různé efekty, ale konečný výsledek je stejný. Přístup k kódu nezbytnému pro těžké zvedání na stránce.
Vytváření animovaného objektu pomocí Animate.css
Budování něčeho skvělého s Animate.css je jednoduché. Jde jen o nalezení kódu CCS a jeho přidání do vašeho vlastního CSS. Pokud to dokážu, může to kdokoli!
První možnost na stránce Animate.css je okamžité opuštění, takže ji použijeme v tomto příkladu.
- Vložit ' 'uvnitř ve vaší šabloně stylů.
- Najděte CSS pro požadovanou animaci a přidejte ji k prvku, který chcete animovat. Příklad: 'přidáte tento odrazový efekt pro testování, obrázek nebo cokoli.
- Chcete-li, aby vše fungovalo, přidejte následující kód CSS. Převzato z výše uvedeného bounce.css.
@keyframes bounce {
od, 20%, 53%, 80%, do {
funkce animace-načasování: krychlový bezier (0, 215, 0, 610, 0, 355, 1 000);
transformace: translate3d (0, 0, 0);
}
40%, 43% {
funkce animace-načasování: krychlový bezier (0, 755, 0, 050, 0, 855, 0, 060);
transformace: translate3d (0, -30px, 0);
}
70% {
funkce animace-načasování: krychlový bezier (0, 755, 0, 050, 0, 855, 0, 060);
transformace: translate3d (0, -15px, 0);
}
90% {
transformace: translate3d (0, -4px, 0);
}
}
.bounce {
animation-name: bounce;
transform-původ: střed dna;
}
Pokračování animace s Animate.css
Výše uvedená sekvence přidává odskokový efekt při prvním načtení stránky, což je skvělé, ale jednorázové. Co takhle přidáme do vznášejícího se. Takto se pokaždé, když se někdo nad testem vznáší, odrazí. Není to něco, co bych udělal na produkčním webu, ale je to skvělý způsob, jak ukázat, jak všechno funguje.
Přidejte následující kód do svého CSS a přidejte efekt odrazení při přechodu. Pokaždé, když se myš umístí nad prvek, měla by se odrazit.
.animated: hover {
-webkit-animation-duration: 1s;
-moz-animace-trvání: 1s;
-ms-animation-duration: 1s;
-o-animace-trvání: 1s;
doba trvání animace: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
Pokud znáte CSS, budete vědět mnohem lépe než já o tom, jak implementovat různé efekty pro různé akce. Jako začátečník mi toto a knihovny poskytované v Animate.css pomáhají vytvářet základní, ale efektivní animace pro mé webové stránky.
Nevím, kolik bych použil na živém webu, protože ne vždy klesají příliš dobře a mobilní uživatelé je zřejmě nemají rádi. Jako lekce o tom, jak CSS funguje a jak jej lze použít k vylepšení webu, je to skvělý zdroj. Jsem jen začátečník, ale i strávit pár hodin s Animate.css pro tento tutoriál mě naučil hodně. Myslím, že si s tím budu hrát mnohem víc, než budu hotový. Co ty?
