{"id":39734,"date":"2017-11-10T18:01:01","date_gmt":"2017-11-10T10:01:01","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=39734"},"modified":"2017-11-10T17:51:10","modified_gmt":"2017-11-10T09:51:10","slug":"animista-generate-css-animations","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/animista-generate-css-animations\/","title":{"rendered":"Build Cool CSS Animations Easily with Animista"},"content":{"rendered":"

There are tons of CSS animation web apps<\/a> online<\/strong>. But, very few compare to the level of detail and ease of use you get with Animista<\/a><\/strong>.<\/p>\n

This free web app lets you generate custom CSS animations at the click of a button<\/strong>. You select between pre-designed motions such as slides, transforms, swings, and even shadow drop animations.<\/p>\n

Once you\u2019ve created your animation, you can export the code<\/strong> just like with other CSS generators<\/a>. Except, this code is much easier to work with and even comes with a built-in minifier tool<\/a><\/strong>.<\/p>\n

\"Animista<\/a><\/figure>\n

Read Also:<\/strong> 30 Cool CSS Animations You Have To See<\/a><\/p>\n

The interface can feel confusing at first but that\u2019s only because of how many options you have!<\/p>\n

You build custom animations following three main steps<\/strong> and using the interface from top to bottom<\/strong>:<\/p>\n

    \n
  1. Pick a motion style<\/strong> (swing, slide, flip-scale) from the circles at the top<\/li>\n
  2. Customize it with different motion types<\/strong> underneath<\/li>\n
  3. Edit your animation options<\/strong> in the floating left-side options bar<\/li>\n<\/ol>\n

    Through this process, you can change the animation\u2019s total duration, the easing style, the delay, pretty much everything. And it all works through pure CSS3<\/strong>, which makes it even more impressive.<\/p>\n

    Also note at the very top navbar you can even choose between different types of animation target styles<\/strong>.<\/p>\n

    The default is \u201cbasic\u201d<\/strong> which can work on pretty much anything (hover, click, or immediate animation). Other targets include page text, background animations, and even custom entrance animations<\/strong> to bring a hidden page element into view.<\/p>\n

    I especially like the \u201cattention\u201d link at the top which has some cool shake & jitter effects for button styles. These work great on CTA buttons<\/a> to grab attention and encourage user interactions.<\/p>\n

    \"Animista<\/a><\/figure>\n

    Once you\u2019re done making adjustments, you just click the little bracket icon<\/strong> in the top-right corner of the preview pane.<\/p>\n

    This brings a new page into view with your full CSS animation class, along with the keyframes<\/strong>. Optional features allow you to minify the code<\/strong> and include the auto-prefixer<\/strong> which supports older web browsers.<\/p>\n

    I\u2019ve used tons of custom CSS animation tools and no doubt Animista is the most feature-rich tool out there. It\u2019s totally free and a bit complex at first but once you understand the interface, it\u2019s by far the best generator you can use.<\/p>\n

    To give it a try, just visit the homepage<\/a> and click \u201cTry me\u201d. You can also share your thoughts & compliments with the web app\u2019s creator @ana108<\/a>.<\/p>\n

    Read Also:<\/strong> How to Create Animations and Transitions with Motion UI<\/a><\/p>","protected":false},"excerpt":{"rendered":"

    There are tons of CSS animation web apps online. But, very few compare to the level of detail and ease of use you get with Animista. This free web app lets you generate custom CSS animations at the click of a button. You select between pre-designed motions such as slides, transforms, swings, and even shadow…<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[507,3498,2902],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nBuild Cool CSS Animations Easily with Animista - Hongkiat<\/title>\n<meta name=\"description\" content=\"There are tons of CSS animation web apps online. But, very few compare to the level of detail and ease of use you get with Animista. This free web app\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/animista-generate-css-animations\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build Cool CSS Animations Easily with Animista\" \/>\n<meta property=\"og:description\" content=\"There are tons of CSS animation web apps online. But, very few compare to the level of detail and ease of use you get with Animista. This free web app\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/animista-generate-css-animations\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2017-11-10T10:01:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/animista-generate-css-animations\/01-animista-example-webapp.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/animista-generate-css-animations\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/animista-generate-css-animations\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Build Cool CSS Animations Easily with Animista\",\"datePublished\":\"2017-11-10T10:01:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/animista-generate-css-animations\\\/\"},\"wordCount\":430,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/animista-generate-css-animations\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/animista-generate-css-animations\\\/01-animista-example-webapp.jpg\",\"keywords\":[\"CSS\",\"CSS Animation\",\"CSS Tools\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/animista-generate-css-animations\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/animista-generate-css-animations\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/animista-generate-css-animations\\\/\",\"name\":\"Build Cool CSS Animations Easily with Animista - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/animista-generate-css-animations\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/animista-generate-css-animations\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/animista-generate-css-animations\\\/01-animista-example-webapp.jpg\",\"datePublished\":\"2017-11-10T10:01:01+00:00\",\"description\":\"There are tons of CSS animation web apps online. But, very few compare to the level of detail and ease of use you get with Animista. This free web app\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/animista-generate-css-animations\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/animista-generate-css-animations\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/animista-generate-css-animations\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/animista-generate-css-animations\\\/01-animista-example-webapp.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/animista-generate-css-animations\\\/01-animista-example-webapp.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/animista-generate-css-animations\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Build Cool CSS Animations Easily with Animista\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Build Cool CSS Animations Easily with Animista - Hongkiat","description":"There are tons of CSS animation web apps online. But, very few compare to the level of detail and ease of use you get with Animista. This free web app","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/animista-generate-css-animations\/","og_locale":"en_US","og_type":"article","og_title":"Build Cool CSS Animations Easily with Animista","og_description":"There are tons of CSS animation web apps online. But, very few compare to the level of detail and ease of use you get with Animista. This free web app","og_url":"https:\/\/www.hongkiat.com\/blog\/animista-generate-css-animations\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2017-11-10T10:01:01+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/animista-generate-css-animations\/01-animista-example-webapp.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/animista-generate-css-animations\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/animista-generate-css-animations\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Build Cool CSS Animations Easily with Animista","datePublished":"2017-11-10T10:01:01+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/animista-generate-css-animations\/"},"wordCount":430,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/animista-generate-css-animations\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/animista-generate-css-animations\/01-animista-example-webapp.jpg","keywords":["CSS","CSS Animation","CSS Tools"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/animista-generate-css-animations\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/animista-generate-css-animations\/","url":"https:\/\/www.hongkiat.com\/blog\/animista-generate-css-animations\/","name":"Build Cool CSS Animations Easily with Animista - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/animista-generate-css-animations\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/animista-generate-css-animations\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/animista-generate-css-animations\/01-animista-example-webapp.jpg","datePublished":"2017-11-10T10:01:01+00:00","description":"There are tons of CSS animation web apps online. But, very few compare to the level of detail and ease of use you get with Animista. This free web app","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/animista-generate-css-animations\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/animista-generate-css-animations\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/animista-generate-css-animations\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/animista-generate-css-animations\/01-animista-example-webapp.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/animista-generate-css-animations\/01-animista-example-webapp.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/animista-generate-css-animations\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Build Cool CSS Animations Easily with Animista"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-akS","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/39734","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=39734"}],"version-history":[{"count":2,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/39734\/revisions"}],"predecessor-version":[{"id":39739,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/39734\/revisions\/39739"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=39734"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=39734"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=39734"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=39734"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}