On-Demand CSS Animations Library

Start animating

How to

  1. 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.
  2. Like
    You see something you like - just Funnel icon it. Rinse and repeat until you are happy with your picks. You can see your favourites at any time by hitting the Funnel icon button or click the Trash can icon button to start from scratch.
  3. Copy / Download Code
    When you are ready, head to download screen by clicking the Downward arrow icon 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.

CSS animations on demand

Mobile version is unavailable at the moment. To experience Animista try it on your desktop.

Buy Me A Coffee