10 ЦСС3 анимације које треба да обележите

Пошто људи имају тенденцију да лакше уочавају ствари које се крећу, паметно коришћене анимације могу да побољшају корисничко искуство сајта скретање пажње на важне елементе које корисници морају брзо приметити.

ЦСС3 је увео нову синтаксу анимације која вам може помоћи да постигнете много занимљивих ствари у својим дизајну. Изградња сјајних анимација понекад може бити компликована и дуготрајна, али тада се изврсно могу користити библиотеке и генератори анимаитона.

Погледајте неке од анимација које су омогућене помоћу ЦСС-а:

38 Инспиринг ЦСС3 Аниматион Демос
15 Лијепих текстуалних ефеката створених помоћу ЦСС-а
30 Цоол ЦСС анимације које морате видјети
Како да креирате ефекат одбијања са ЦСС3 анимацијом

У овом посту ћемо погледати 10 сјајних алата који могу олакшати и убрзати креирање властитих анимација.

ЦСС3Ген ЦСС3 Аниматион Генератор

ЦСС3Ген пружа вам једноставан аниматорски генератор који вам омогућава брзо генерисање основних анимација. Иако са овим алатом нећете радити компликоване радове, то је одличан избор ако желите да направите стандардну анимацију без превише напора.

ти не морате прљавим рукама са кодом, пошто можете поставити својства на обрасцу, прегледајте резултат, а затим једноставно копирајте и залијепите код у своју ЦСС датотеку.

2. ЦСС Анимате

ако ти потребне су компликованије анимације, можете наћи ЦСС Анимате корисно. Има зрелији интерфејс, можете подесити нешто више својстава, а можете пратити, зауставити и поново покренути анимацију помоћу интуитивне временске линије.

Ту су и Пример анимације, као што су “Боунце”, “Мућкати”, и “Свинг”, које можете учитати у генератор и модификовати код према вашим потребама.

3. Цовелопинг ЦСС Генератор анимације

ЦовелопингГенератор анимације је вероватно најбољи избор ако сте нови са ЦСС3 анимацијама, и желе брзо да схвате како раде. Ова једноставна, али моћна алатка вам омогућава да тестирате различите врсте анимација које ЦСС3 нуди и да лако проверите која је разлика између њих.

Потребно је само да подесите 4 параметра: врсту анимације, функцију анимације, трајање у секундама и ако је анимација бесконачна. Када будете спремни, морате само да набавите и зграбите генерисани ХТМЛ и ЦСС код.

4. Магиц Аниматионс

Магиц Аниматионс је цоол ЦСС библиотека која омогућава лако поставите анимације са специјалним ефектима на вашем сајту. На пример, можете да натерате елементе да нестану, отворите лево или десно, а затим се вратите, ротирате надоле, горе, лево или десно, и многе друге

Све што треба да урадите је да преузмете код, укључите ЦСС датотеку у вашу ХТМЛ страницу и додате одговарајућу класу уз помоћ јКуери на следећи начин:

 $ ('. иоурдив'). ховер (фунцтион () $ (тхис) .аддЦласс ('магицтиме пуффИн'););

Такође можете да промените подешавања тајмера и да анимацију направите бесконачном уз помоћ јКуери-а (за више детаља погледајте реадме фајл) \ т.

5. Анимате.цсс

Анимате.цсс пружа вам скуп цоол, цросс-бровсер ЦСС3 анимације. Анимације су подељене у групе као што су Тражиоци пажње, Одскочни улази, Одскакање излаза, Фадинг улази, и многи други, тако да се стварно не можете жалити на недостатак избора.

Можете да преузмете код из Гитхуб-а, онда морате само да додате ЦСС датотеку на своју ХТМЛ страницу, а релевантне ЦСС класе на ХТМЛ елементе које желите да анимирате.

6. Боунце.јс

Боунце.јс је згодна ЈаваСцрипт библиотека која вам омогућава створите компликоване анимације. Боунце.јс има зрели кориснички интерфејс који вам омогућава да или додате различите компоненте - као што су олакшавање, трајање, одлагање и број одбијања - ручно у вашу анимацију, или да изаберете унапред припремљену поставку, а затим да репродукујете анимацију, и фино подесите својства ако је потребно.

7. АниЈС

АниЈС је суперкулирана ЈаваСцрипт библиотека која вам омогућава да додате ЦСС3 анимације у ваше дизајне и на Изградите софистициране УИ компоненте као што су анимиране картице, хармонике, модали, клизни менији, обавештења о мобилним апликацијама, скрола и још много тога.

Она ради са свим модерним претраживачима укључујући иОС и Андроид, не захтева библиотеке трећих страна и има спектакуларан излог под именом АниЦоллецтион где можете лако експериментисати са различитим ефектима које пружа библиотека.

8. Сингле Елемент ЦСС Спиннерс

Да ли сте икада желели да побољшате свој дизајн анимирани утоваривачи? Ако је одговор да, ова слатка ЦСС спиннер библиотека може бити одличан избор за вас. ЦСС код за спиннере је написан у ЛЕСС. Нема никаквих подешавања, код је спреман, потребно је само да га убаците у своје ХТМЛ и ЦСС датотеке.

9. Одометер

Одометер је бриљантан алат ставите кул анимиране мераче на ваш сајт. То је ЦСС и ЈаваСцрипт библиотека, ЦСС део је написан у Сасс-у, и можете бирати између различитих тема као што је “Дигитал”, “Железничка станица”, и “Цар”.

Да бисте користили Одометар, морате додати ЈаваСцрипт датотеку и изабрану датотеку теме на своју ХТМЛ страницу, затим на цласс = "одометар" селектора на елемент који желите да направите у анимирани мерач. Идеалан избор за визуелно представљање података, или за израду “Долази ускоро” страница више привлачна.

10. Снаббт.јс

Снаббт.јс је минималистичка библиотека анимација која помаже вам да лако преместите ствари. Ако вам треба мало инспирације, погледајте демо да бисте видели шта можете да постигнете помоћу овог паметног алата за анимацију, анимирана периодична табела на слици испод је само једна од многих могућности које Снаббт.јс олакшава имплементацију.

Морате написати мали ЈаваСцрипт ако желите да користите ову библиотеку, али као резултат је прилично спектакуларан, тако да је вероватно вредан невоље.