10 CSS3 анимационни инструменти, които трябва да маркирате
Тъй като хората са склонни по-лесно да възприемат нещата, които се движат, умело използваните анимации могат да подобрят потребителския опит на даден сайт насочване на вниманието към важните елементи, които потребителите трябва бързо да забележат.
CSS3 въвежда нов синтаксис за анимация, който може да ви помогне да постигнете много интересни неща във вашите проекти. Изграждането на страхотни анимации понякога може да бъде сложно и отнема много време, ето защо библиотеките и генераторите за анимация могат да се използват отлично.
Вижте някои от възможните анимации с CSS:
- 38 Вдъхновяващ CSS3 Анимация Демо
- 15 красиви текстови ефекта, създадени с CSS
- 30 готини CSS анимации, които трябва да видите
- Как да създадете Bounce Effect с CSS3 Анимация
В тази публикация ще разгледаме 10 блестящи инструмента, които могат да улеснят и ускорят създаването на собствени анимации.
1. CSS3Gen CSS3 Анимационен Генератор
CSS3Gen ви предоставя лесен за използване генератор на анимации, който ви позволява бързо да генерирате основни анимации. Въпреки че няма да правите сложни творби с този инструмент, това е чудесен избор, ако искате да създадете стандартна анимация без прекалено много шум.
Ти не трябва да правите ръцете си мръсни с код, тъй като можете да зададете свойствата на формуляр, прегледайте резултата, след това просто копирайте и поставете кода в собствения си CSS файл.
2. CSS Animate
Ако ти се нуждаят от по-сложни анимации, може да откриете CSS Анимирайте полезен. Той има по-зрял потребителски интерфейс, можете да зададете малко повече свойства и можете да следите, да спрете и да рестартирате анимацията с помощта на интуитивна времева линия.
Има и примерни анимации, като например “подскачане”, “Клатя”, и “Люлка”, които можете да зареждате в генератора и да променяте кода според вашите нужди.
3. Покриване на CSS анимационен генератор
CovelopingАнимационният генератор е може би най-добрият избор ако сте нов с CSS3 анимации, и искате бързо да разберете как работят. Този прост, но мощен инструмент ви позволява да тествате различните видове анимации, които CSS3 може да предложи, и лесно да проверите каква е разликата между тях.
Трябва само да зададете 4 параметъра: тип анимация, функция за анимация, продължителност в секунди и ако анимацията е безкрайна. Когато сте готови, трябва само да получите и вземете генерирания HTML и CSS код.
4. Магически анимации
Магически анимации е страхотна CSS библиотека, която прави възможно лесно поставяйте анимации със специални ефекти на сайта си. Например можете да накарате елементите да изчезват, да се отварят наляво или надясно, след това да се връщат, да се въртят надолу, нагоре, наляво или надясно, а много други
Всичко, което трябва да направите, е да изтеглите кода, да включите CSS файла във вашата HTML страница и да добавите подходящия клас с помощта на jQuery по следния начин:
$ ('. yourdiv'). hover (функция () $ (this) .addClass ('magictime puffIn');); Можете също да промените настройките на таймера и да направите анимацията безкрайна с помощта на jQuery (за повече подробности вижте файла readme).
5. Animate.css
Animate.css ви предоставя набор от страхотни, крос-браузърни CSS3 анимации. Анимациите са разделени на групи като търсещи внимание, подскачащи входове, отскачащи изходи, избледняващи входове и много други, така че наистина не можете да се оплаквате от липса на избор.
Можете да изтеглите кода от Github, след което трябва само да добавите CSS файла към HTML страницата си и съответните CSS класове към HTML елементите, които искате да анимирате.
6. Bounce.js
Bounce.js е удобна JavaScript библиотека, която ви позволява създавайте сложни анимации. Bounce.js има зрял потребителски интерфейс, който ви позволява или да добавяте различни компоненти - като облекчаване, продължителност, забавяне и брой отскачания - ръчно към вашата анимация, или да изберете готови за използване предварителни настройки, след това да възпроизведете анимацията, и настройте свойствата, ако е необходимо.
7. AniJS
AniJS е библиотека, която ви позволява да добавяте CSS3 анимации към вашите проекти и към изграждане на сложни UI компоненти като анимирани раздели, акордеони, модали, плъзгащи се менюта, известия за мобилни приложения, разкривания на превъртане и много други.
Той работи с всички модерни браузъри, включително iOS и Android, не се нуждае от библиотеки на трети страни и има зрелищна витрина AniCollection, където можете лесно да експериментирате с различните ефекти, предоставени от библиотеката.
8. CSS Spinners с един елемент
Искали ли сте някога да подобрите дизайна си с анимирани зареждащи центри? Ако отговорът е "да", тази сладка библиотека на CSS може да бъде отличен избор за вас. CSS кодът за spinners е написан на LESS. Няма настройки, кодът е готов, трябва само да го вмъкнете във вашите HTML и CSS файлове.
9. Километраж
одометър е брилянтен инструмент поставете готини анимирани метри на сайта си. Това е CSS и JavaScript библиотека, CSS частта е написана на Sass и можете да избирате от различни теми като “Дигитален”, “Гара”, и “Кола”.
За да използвате километража, трябва да добавите JavaScript файла и избрания файл на темата към вашата HTML страница, след това върху клас = "одометъра" селектора на елемента, който искате да направите в анимиран метър. Идеален избор за визуално представяне на данни или за създаване на “Очаквайте скоро” страница по-привлекателна.
10. Snabbt.js
Snabbt.js това е библиотека с минималистична анимация, която ви помага лесно да движите нещата. Ако се нуждаете от малко вдъхновение, разгледайте демонстрациите, за да видите какво можете да постигнете с този интелигентен инструмент за анимация, анимираната периодична таблица на екрана по-долу е само една от многото възможности, които Snabbt.js прави лесно за изпълнение.
Трябва да напишете малко JavaScript, ако искате да използвате тази библиотека, но тъй като резултатът е доста ефектен, значи вероятно си струва неприятностите.
