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.
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!
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:
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.
You can remove animations from the download queue by clicking on the 'x' button. Worry not though – this will not remove them from your favourites list!Pick more animations
CSS minification and autoprefixer are on by default. You can turn those features off by unchecking them above.
CSS code below is free for personal and commercial usage and is licensed under FreeBSD License.
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.
All CSS animations generated with Animista.net are free for personal and commercial usage and are licensed under 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:
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.
Mobile version is unavailable at the moment. To experience Animista try it on your desktop.
I hate spam and will only send out emails when there is some news to share.