About
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 :)
Huge thanks to @sergej108 for helping me out with the JS part and for supporting and encouraging me to publish this project. Animista wouldn't be possible without him.
Get in touch
Should you decide to use Animista for your next cool project or have any suggestions/feedback it would be awesome if you gave me a shout at cssanimista(at)gmail.com!
Support Animista
If you would like to support Animista and encourage me to dedicate more time to improving it and adding new features, you can do so by donating here.
How to
- Play
So this is how it works… You start by browsing through animations and playing with various options like easing, delay, duration etc. You will be able to see how they affect the animation on the spot. - LikeYou see something you like - just
it. Rinse and repeat until you are happy with your picks. You can see your favourites at any time by hitting the 
button or click the 
button to start from scratch. - Copy / Download CodeWhen you are ready, head to download screen by clicking the
button or download link in main navigation. If you use Chrome browser, hit the download button and check your download folder. Boom - if everything went well the 'animista.css' file should be there. Otherwise you can simply copy the generated CSS code and paste it into your favourite code editor.
Few notes
Download feature relies on HTML5 FileSystem API and is supported in Chrome browser only. No worries, in other browsers you will have the option to copy the generated CSS code to clipboard.
Also, some of the animations are experimental and may not work as expected in older browsers no matter how you prefix them. Use your own judgement or better yet – consult the super-useful caniuse.com to check for browser support.
License
All CSS animations generated with Animista.net are free for personal and commercial usage and are licensed under FreeBSD license.
FreeBSD License
Copyright 2017 Ana Travas
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
- Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
- Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.