Build Cool CSS Анимации Лесно с Animista

Има тона уеб приложения за анимация на CSS онлайн. Но много малко хора сравняват нивото на детайлност и лекотата на използване, с която се сдобивате Animista.

Това безплатно уеб приложение ви позволява генериране на персонализирани CSS анимации само с едно натискане на бутон. Можете да избирате между предварително проектирани движения, като слайдове, трансформирания, люлки и дори анимации с падане на сянка.

След като създадете анимацията си, можете експортирайте кода точно както с други CSS генератори. Освен това, този код е много по-лесен за работа и дори идва с вграден инструмент.

Интерфейсът може да се чувства объркващ в началото, но това е само за това колко опции имате!

Създавате персонализирани анимации следват три основни стъпки и използване на интерфейса от горе до долу:

1. Изберете стил на движение (люлка, слайд, флип-скала) от кръговете в горната част
2. Персонализирайте го с различни типове движения отдолу
3. Редактирайте опциите си за анимация в плаващата лента с опции отляво

Чрез този процес можете да промените общата продължителност на анимацията, стила на облекчаване, забавянето, почти всичко. И всичко това работи чрез чист CSS3, което го прави още по-впечатляващ.

Също така обърнете внимание на най-горната навигационна лента, която можете дори да избирате различни типове стилове на анимация.

Най- по подразбиране е “основен” които могат да работят върху почти всичко (навъртане, щракване или незабавна анимация). Други цели включват текст на страницата, фонови анимации и дори персонализирани входни анимации да покаже скрит елемент на страница.

Особено харесвам “внимание” връзката в горната част, която има някои страхотни ефекти за разклащане и трептене за стилове на бутони. Те работят чудесно за бутоните на CTA, за да привлекат вниманието и да насърчат взаимодействието с потребителите.

След като приключите с корекциите, вие просто кликнете върху иконата на малката скоба в горния десен ъгъл на прозореца за визуализация.

Това ще покаже нова страница с пълния клас на CSS анимация, заедно с ключовите кадри. Допълнителните функции ви позволяват намали кода и включва автоматичния представка който поддържа по-стари уеб браузъри.

Използвал съм тона от персонализирани CSS анимационни инструменти и без съмнение Animista е най-богатия на функции инструмент там. Това е напълно безплатно и малко сложно в началото, но след като разберете интерфейса, това е най-добрият генератор, който можете да използвате.

За да опитате, просто посетете началната страница и кликнете върху “Опитай ме”. Можете също да споделите своите мисли и комплименти с създателя на уеб приложението @ ana108.