Animista
Animista is a place where you can play with a collection of ready to use CSS animations, tweak them and download only those you will actually use.
About Animista
Animista is a web-based tool for browsing and customizing pre-made CSS animations. Users select from a library of animation types (transforms, backgrounds, text, images, cards, and other elements) and adjust parameters such as duration, timing function, delay, iteration count, direction, and fill mode, with a live preview showing the effect of each change.
Users can mark animations as favorites and queue selections for export. Generated output can be downloaded as a CSS file (Chrome only, via the HTML5 FileSystem API) or copied directly for use in a code editor, with optional minification and autoprefixing applied by default. The generated CSS is licensed under the FreeBSD License for personal and commercial use.
The tool is aimed at web developers and designers who want to preview and fine-tune CSS animations before incorporating them into a project, without writing keyframes from scratch. It also offers paid brand placement slots for sponsors, displayed as logos on the site's front page and other pages.
Key features
- Browse and preview a library of pre-made CSS animations
- Tweak animation options like easing, duration, delay, and iteration count in real time
- Generate CSS code with optional minification and autoprefixer
- Save favourite animations and queue multiple picks for download
- Download generated CSS as an animista.css file (Chrome only) or copy code to clipboard
Frequently asked questions
Is Animista free to use?
Yes, the generated CSS code is free for personal and commercial usage and is licensed under the FreeBSD License.
Does it work in all browsers?
The direct file download feature relies on the HTML5 FileSystem API and only works in Chrome, but other browsers can copy the generated CSS code to clipboard instead.
Who is Animista for?
It's aimed at web developers and designers who want to quickly find, customize, and reuse CSS animations in their projects.
What customization options are available for animations?
Users can adjust easing/timing-function, duration, delay, iteration count, and animation direction, then preview changes instantly.
Show your product to thousands of developers
· 100k monthly pageviews
· 7k newsletter subscribers
You might also like
CSSnippets
Code Snippet/Programming/AnimationCSSnippets is a collection of HTML, React, CSS and Tailwind CSS code snippets for buttons, box-shadows, cards, checkboxes, dropdowns and many more.
React Bits
Programming/UI/AnimationA large collection of animated React components made to spice up your web creations. Animations, components, backgrounds, and awesome stuff with customization options as props.
Tailanimista
AnimationAnimista, but for Tailwind CSS. Easily generate beautiful animations!
