Subscribe
Sign in
Animista β Create beautiful CSS animations in your browser
Animista is a place where you can play with a collection of pre-made CSS animations, tweak them and get only those you will actually use.
55
Replies
Best
Really smooth animations, even for the branding! This will help me play with all the transforms I've never used and improve my toolkit. Thanks!
Came across this a few days ago. Usually I hate HTML/CSS generators, but this one is actually really useful. No bloat and good to use as a look-up as well ("how did that effect works again?"). π
Animista is a place where you can play with a collection of pre-made CSS animations, tweak them and get only those you will actually use.
Animista started out as a small side-project of mine. As I was increasingly using CSS animations, I thought it would come in handy to have them organised in a meaningful and accessible way so that they can be easily reused on different projects.
The idea was to create a playground of a sorts where a collection of pre-made animations could be tested and tweaked before actually using them. Seeing how various options like easing, delay, duration and others affect the animation proved to be very useful. And basically that is how Animista was born.
I have been using Animista for a while now and I hope some of you will find it useful as well. It is still very much a work in progress and hopefully it will evolve over the time :)
@giopecchio @jonathanmarvens @ariaitch @matsilva @james_osullivan @askar @chthomos @clement_chazarra @janklimo @pawelhalicki @roberttanislav - Thanks so much for supportingβ Animista and for all your kind words. Really means a lot π
@alexisshimanoff Thanks Alexis, glad you like it! Animista is all client side - so plain HTML, CSS and JS.
@leonlee Hi Leon, not sure if I understood well. You can add animations you like to your favourites (heart icon) and then get them all at once from the download page.
Here's the link to page explaining how to - https://animista.net/how-to
Hope this helps :)
@leonlee Hi Leon, not sure if I understood well. You can add animations you like to your favourites (heart icon) and then get them all at once from the download page.
Here's the link to page explaining how to - https://animista.net/how-to
Hope this helps :)
@ana_travas Hi Ana, sorry for any confusion, by "combine" I mean, for instance, I would like "flip" and "scale" applied to an element at the same time so I can see this combination in the preview window.
This is a great tool, looks good and so easy to use!
One small issue - I'm not able to copy the code in FF. It says copied to clipboard, but isn't. I can't seem to select all / copy either.
Also I think it would be useful to include the keyframes in the css. I wondering why mine didn't work like yours until I realised what I was missing.
@jaamproductions Great to hear you like Animista! Thanks for letting me know about FF, I will look into it βΊοΈ
@ana108 @jaamproductions I'm going to second Jaam's comment regarding keyframes needing to be included for the copied code to work. Thanks for creating this fantastic resource Ana!
@jaamproductions You can now copy keyframes code for single animation on the preview page as you suggested : )
This is so great! I registered my email for the newsletter. Congrats on making a great tool!
So damn awesome.. Just wondering if there is something similar for android/iOS development
Invoice generator