Animate.css има вече няколко години и трябва да призная, че закъснях за купона. Открих го само преди няколко месеца, докато търсех в мрежата за някои уроци за анимация за CSS и открих какво трябва да бъде най-бързият, най-прост начин за анимиране около Animate.css.
Създаден от човек, наречен Dan Eden, Animate.css е бърз начин да видите как CCS работи и да получите някои анимационни действия на вашия уебсайт.
Описан като „Просто добавете водна CSS анимация“ Animate.css е малко забавление със сериозна страна. Тя позволява дори на любители уеб дизайнери, като мен, бързо да се справят с основите на CSS анимацията и да създадат прости, но ефективни ефекти за уебсайтове. От едно анимирано заглавие до по-ангажирани движения, този инструмент може да го направи.
Animate.css
Animate.css е достъпен за изтегляне от GitHub и по същество е библиотека от прости CSS ефекти, събрани на едно място. Всяка анимация е добре опакована и готова за употреба. Всичко, което трябва да направите, е да намерите анимацията, която харесвате и да приложите класа. Това наистина е всичко, което има за него.
Не е нужно да изтегляте цялата библиотека, ако не искате, тъй като има 2500 реда код в нея. Можете да посетите сайта Animate.css, да намерите анимация и да кликнете върху връзката Изтеглете Animate.css. Той зарежда класа на уеб страница, за да копирате и използвате, както сметнете за добре.
Все пак е по-лесно да използвате GitHub и да разгледате надолу, за да намерите ефекта, който търсите.
- Отворете страницата css GitHub.
- Щракнете върху връзката Източник за достъп до списъка с елементи.
- Изберете вида на ефекта, който търсите от списъка. Отскача е търсещ внимание, така че изберете връзката на вниманието.
- Изберете bounce.css.
- Копирайте кода и го поставете на страницата си, за да приложите анимацията.
Наистина е толкова просто. Очевидно бихте избрали различни опции за различните ефекти, но крайният резултат е един и същ. Достъп до кода, необходим за тежки повдигане на страницата.
Изграждане на анимиран обект с Animate.css
Изграждането на нещо готино с Animate.css е просто. Въпрос е само да намерите CCS кода и да го добавите към вашия собствен CSS. Ако мога да го направя, всеки може!
Първата опция на страницата Animate.css е отскачане, така че нека използваме това в този пример.
- Поставяне “ ' вътре във вашия стилов лист.
- Намерете CSS за анимацията, която искате, и я добавете към елемента, който искате да анимирате. Например добавете „ ', за да добавите този ефект на отскачане за тест, изображение или каквото и да е.
- Добавете следния CSS код, за да работи всичко. Взето от bounce.css по-горе.
@keyframes скача {
от, 20%, 53%, 80%, до {
функция за анимация-синхронизация: кубик-безир (0.215, 0.610, 0.355, 1.000);
трансформация: translate3d (0, 0, 0);
}
40%, 43% {
функция за анимация-синхронизация: кубик-безие (0.755, 0.050, 0.855, 0.060);
трансформация: translate3d (0, -30px, 0);
}
70% {
функция за анимация-синхронизация: кубик-безие (0.755, 0.050, 0.855, 0.060);
трансформация: translate3d (0, -15px, 0);
}
90% {
трансформация: translate3d (0, -4px, 0);
}
}
.блъска {
анимация-име: скача;
трансформационен произход: централно дъно;
}
Анимация допълнително с Animate.css
Горната последователност добавя ефект на отпадане при първо зареждане на страницата, което е готино, но еднократно. Какво ще кажете да го добавим за задържане. По този начин, когато някой се задържи над теста, той отскача. Това не е нещо, което бих направил на уебсайт за производство, но е чудесен начин да демонстрирам как работи всичко.
Добавете следния код във вашия CSS, за да добавите ефект на отскачане на ховър. Всеки път, когато мишката преминава върху елемента, тя трябва да отскача.
.animated: задръжте {
-webkit-анимация-продължителност: 1s;
-moz-анимация-продължителност: 1s;
-ms-анимация-продължителност: 1s;
-онимация-продължителност: 1s;
продължителност на анимацията: 1s;
-webkit-animation-fill-mode: и двете;
-moz-анимация-режим на запълване: и двете;
-ms-animation-fill-mode: и двете;
-o-анимация-режим на запълване: и двете;
режим на анимация-запълване: и двете;
}
Ако знаете CSS, вие ще знаете много по-добре от мен за това как да прилагате различни ефекти към различни действия. Като начинаещ това и библиотеките, предоставени в Animate.css, ми помагат да създам основни, но ефективни анимации за моите уеб страници.
Не знам колко бих използвал на уебсайт на живо, тъй като те не винаги се справят твърде добре, а мобилните потребители изглежда изобщо не ги харесват. Въпреки това, като урок как CSS работи и как може да се използва за подобряване на мрежата, това е чудесен ресурс. Аз съм само начинаещ, но дори да прекарам няколко часа с Animate.css за този урок ме научи на много. Мисля, че ще играя с него много повече, преди да свърша. Ами ти?
