{"id":25432,"date":"2016-01-05T23:01:14","date_gmt":"2016-01-05T15:01:14","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=25432"},"modified":"2022-10-14T18:15:39","modified_gmt":"2022-10-14T10:15:39","slug":"css3-animation-tools","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css3-animation-tools\/","title":{"rendered":"10 CSS3 Animation Tools You Should Bookmark"},"content":{"rendered":"<p>As people tend to more easily perceive things that move, smartly used animations can enhance the user experience of a site by <strong>drawing attention to important elements users need to quickly notice<\/strong>.<\/p>\n<p>CSS3 has introduced a new <a href=\"https:\/\/css-tricks.com\/snippets\/css\/keyframe-animation-syntax\/\" target=\"_blank\" rel=\"noopener\">animation syntax<\/a> that can help you achieve <a href=\"https:\/\/www.hongkiat.com\/blog\/css3-bounce-effect\/\" target=\"_blank\" rel=\"noopener\">many<\/a> <a href=\"https:\/\/www.hongkiat.com\/blog\/css3-animation-advanced-marquee\/\" target=\"_blank\" rel=\"noopener\">interesting<\/a> <a href=\"https:\/\/www.hongkiat.com\/blog\/creative-css-animations\/\" target=\"_blank\" rel=\"noopener\">things<\/a> in your designs. Building cool animations can sometimes be complicated and time-consuming, though, that\u2019s when animation libraries and generators can be excellently used.<\/p>\n<p>Check out some of the animations made possible with CSS:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.hongkiat.com\/blog\/creative-css-animations\/\">38 Inspiring CSS3 Animation Demos<\/a><\/li>\n<li><a href=\"https:\/\/www.hongkiat.com\/blog\/css-text-effects\/\">15 Beautiful Text Effects Created with CSS<\/a><\/li>\n<li><a href=\"https:\/\/www.hongkiat.com\/blog\/creative-css-animations\/\">30 Cool CSS Animations You Have To See<\/a><\/li>\n<li><a href=\"https:\/\/www.hongkiat.com\/blog\/css3-bounce-effect\/\">How to Create the Bounce Effect with CSS3 Animation<\/a><\/li>\n<\/ul>\n<p>In this post we will take a look at 10 brilliant tools that can make it easier and faster to create your own animations.<\/p>\n<h2>1. <a href=\"https:\/\/css3gen.com\/css3-animation\/\" target=\"_blank\" rel=\"noopener nofollow\">CSS3Gen CSS3 Animation Generator<\/a><\/h2>\n<p><strong>CSS3Gen<\/strong> provides you with an easy-to-use animation generator that allows you to quickly generate basic animations. Although you won\u2019t make complicated artwork with this tool, it\u2019s a great choice if you want to create a standard animation without too much fuss.<\/p>\n<p>You <strong>don\u2019t have to make your hands dirty with code<\/strong>, as you can set the properties on a form, preview the result, then simply copy and paste the code into your own CSS file.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-animation-tools\/css3gen.jpg\" alt=\"CSS3 Gen\" width=\"700\" height=\"911\"><\/figure>\n<h2>2. <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/animate.style\/\">CSS Animate<\/a><\/h2>\n<p>If you <strong>need more complicated animations<\/strong>, you may find <strong>CSS Animate<\/strong> useful. It has a more mature UI, you can set slightly more properties, and you can follow, stop, and restart the animation with the help of an intuitive timeline.<\/p>\n<p>There are also Example animations, such as \u201cBounce\u201d, \u201cShake\u201d, and \u201cSwing\u201d, that you can load into the generator and modify the code according to your needs.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-animation-tools\/cssanimate.jpg\" alt=\"CSS Animate\" width=\"700\" height=\"585\"><\/figure>\n<h2>3. Coveloping CSS Animation Generator<\/h2>\n<p><strong>Coveloping<\/strong>\u2018s animation generator is probably the best choice <strong>if you are new with CSS3 animations<\/strong>, and want to quickly understand how they work. This simple but powerful tool allows you to test the different types of animations CSS3 has to offer, and easily check out what is the difference between them.<\/p>\n<p>You only have to set 4 parameters: animation type, animation function, duration in secs, and if the animation is infinite. When you are ready, you only have to get and grab the generated HTML and CSS code.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-animation-tools\/coveloping.jpg\" alt=\"Coveloping\" width=\"700\" height=\"365\"><\/figure>\n<h2>4. <a href=\"https:\/\/www.minimamente.com\/project\/magic\/\" target=\"_blank\" rel=\"noopener\">Magic Animations<\/a><\/h2>\n<p><strong>Magic Animations<\/strong> is a cool CSS library that makes it possible to <strong>easily place animations with special effects<\/strong> on your site. For example, you can make elements vanish in and out, open to the left or right, then return, rotate down, up, left, or right, and many others<\/p>\n<p>All you have to do is to <a href=\"https:\/\/github.com\/miniMAC\/magic\" target=\"_blank\" rel=\"noopener\">download<\/a> the code, include the CSS file into your HTML page, and add the appropriate class with the help of jQuery in the following way:<\/p>\n<pre>\r\n$('.yourdiv').hover(function () {\r\n  $(this).addClass('magictime puffIn');\r\n});<\/pre>\n<p>You can also change the settings of the timer and make the animation infinite with the help of jQuery (for more details, see the readme file).<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-animation-tools\/magic-animations.jpg\" alt=\"Magic Animations\" width=\"700\" height=\"587\"><\/figure>\n<h2>5. <a href=\"https:\/\/daneden.github.io\/animate.css\/\" target=\"_blank\" rel=\"noopener\">Animate.css<\/a><\/h2>\n<p><strong>Animate.css<\/strong> provides you with a set of <strong>cool, cross-browser CSS3 animations<\/strong>. The animations are divided into groups such as Attention Seekers, Bouncing Entrances, Bouncing Exits, Fading Entrances, and many others, so you really can\u2019t complain about a lack of choice.<\/p>\n<p>You can download the code from <a href=\"https:\/\/github.com\/animate-css\/animate.css\" target=\"_blank\" rel=\"noopener\">Github<\/a>, then you only have to add the CSS file to your HTML page, and the relevant CSS classes to the HTML elements that you want to animate.<\/p>\n<p class=\"note\"><strong>Read more: <\/strong><a href=\"https:\/\/www.hongkiat.com\/blog\/animatecss-css3-animation-library\/\">How to Use Animate.css To Create Animations Easily<\/a><\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-animation-tools\/animate-css.jpg\" alt=\"Animate.css\" width=\"700\" height=\"476\"><\/figure>\n<h2>6. <a href=\"https:\/\/bouncejs.com\/\" target=\"_blank\" rel=\"noopener\">Bounce.js<\/a><\/h2>\n<p><strong>Bounce.js<\/strong> is a handy JavaScript library that enables you to <strong>create complicated animations<\/strong>. Bounce.js has a mature user interface that allows you to either add different components  \u2013 such as easing, duration, delay, and a number of bounces \u2013 manually to your animation, or select a ready-to-use preset, then play the animation and fine-tune the properties if it\u2019s necessary.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-animation-tools\/bounce-js.jpg\" alt=\"Bounce.js\" width=\"700\" height=\"436\"><\/figure>\n<h2>7. <a href=\"https:\/\/anijs.github.io\/\" target=\"_blank\" rel=\"noopener\">AniJS<\/a><\/h2>\n<p><strong>AniJS<\/strong> is a supercool JavaScript library that allows you to add CSS3 animations to your designs, and to <strong>build sophisticated UI components<\/strong> such as <a href=\"https:\/\/codepen.io\/darielnoel\/full\/uJLGb\/\" target=\"_blank\" rel=\"noopener nofollow\">animated tabs<\/a>, <a href=\"https:\/\/codepen.io\/darielnoel\/full\/qvGEb\/\" target=\"_blank\" rel=\"noopener nofollow\">accordions<\/a>, <a href=\"https:\/\/codepen.io\/darielnoel\/full\/vpBhy\/\" target=\"_blank\" rel=\"noopener nofollow\">modals<\/a>, <a href=\"https:\/\/codepen.io\/darielnoel\/full\/ypfEs\/\" target=\"_blank\" rel=\"noopener nofollow\">sliding menus<\/a>, <a href=\"https:\/\/codepen.io\/darielnoel\/full\/EdueI\/\" target=\"_blank\" rel=\"noopener nofollow\">mobile app notifications<\/a>, <a href=\"https:\/\/codepen.io\/darielnoel\/full\/oemdE\/\" target=\"_blank\" rel=\"noopener nofollow\">scroll reveals<\/a>, and many more.<\/p>\n<p>It works with all modern <a href=\"https:\/\/github.com\/anijs\/anijs\/wiki\/Browser-Compatibility\" target=\"_blank\" rel=\"noopener\">browsers<\/a> including iOS and Android, doesn\u2019t need any third party libraries, and has a spectacular showcase called <a href=\"https:\/\/anicollection.github.io\/#\/\" target=\"_blank\" rel=\"noopener\">AniCollection<\/a> where you can easily experiment with the different effects provided by the library.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-animation-tools\/ani-js.jpg\" alt=\"AniJS\" width=\"700\" height=\"417\"><\/figure>\n<h2>8. <a href=\"https:\/\/projects.lukehaas.me\/css-loaders\/\" target=\"_blank\" rel=\"noopener\">Single Element CSS Spinners<\/a><\/h2>\n<p>Have you ever wanted to enhance your designs with <strong>animated loading spinners<\/strong>? If the answer is yes, this cute CSS spinner library may be an excellent choice for you. The CSS code for the spinners is written in <a href=\"https:\/\/github.com\/lukehaas\/css-loaders\" target=\"_blank\" rel=\"noopener\">LESS<\/a>. There aren\u2019t any settings, the code is ready-made, and you only have to insert it into your own HTML and CSS files.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-animation-tools\/css-spinners.jpg\" alt=\"CSS Spinners\" width=\"700\" height=\"400\"><\/figure>\n<h2>9. <a href=\"https:\/\/github.hubspot.com\/odometer\/docs\/welcome\/\" target=\"_blank\" rel=\"noopener\">Odometer<\/a><\/h2>\n<p><strong>Odometer<\/strong> is a brilliant tool to <strong>place cool animated meters onto your site<\/strong>. It\u2019s a CSS and JavaScript library, the CSS part is written in <a href=\"https:\/\/sass-lang.com\/\" target=\"_blank\" rel=\"noopener\">Sass<\/a>, and you can choose from different themes such as \u201cDigital\u201d, \u201cTrain Station\u201d, and \u201cCar\u201d.<\/p>\n<p>To use Odometer, you have to add the JavaScript file and the chosen theme file to your HTML page, then the <code>class=\"odometer\"<\/code> selector to the element you want to make into an animated meter. Ideal choice to visually represent data or to make a \u201cComing Soon\u201d page more eye-catching.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-animation-tools\/odometer.jpg\" alt=\"Odometer\" width=\"700\" height=\"407\"><\/figure>\n<h2>10. <a href=\"https:\/\/daniel-lundin.github.io\/snabbt.js\/\" target=\"_blank\" rel=\"noopener\">Snabbt.js<\/a><\/h2>\n<p><strong>Snabbt.js<\/strong> is a minimalistic animation library that <strong>helps you easily move things around<\/strong>. If you need a little inspiration, take a look at the <a href=\"https:\/\/daniel-lundin.github.io\/snabbt.js\/#demos\" target=\"_blank\" rel=\"noopener\">demos<\/a> to see what you can achieve with this smart animation tool, the animated periodic table on the screenshot below is just one of the many possibilities Snabbt.js makes easy to implement.<\/p>\n<p>You need to write <a href=\"https:\/\/daniel-lundin.github.io\/snabbt.js\/#usage\" target=\"_blank\" rel=\"noopener\">a little JavaScript<\/a> if you want to use this library, but as the result is quite spectacular, so it\u2019s probably worth the trouble.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-animation-tools\/snabbt-js.jpg\" alt=\"Snabbt.js\" width=\"700\" height=\"393\"><\/figure>","protected":false},"excerpt":{"rendered":"<p>As people tend to more easily perceive things that move, smartly used animations can enhance the user experience of a site by drawing attention to important elements users need to quickly notice. CSS3 has introduced a new animation syntax that can help you achieve many interesting things in your designs. Building cool animations can sometimes&hellip;<\/p>\n","protected":false},"author":146,"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],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>10 CSS3 Animation Tools You Should Bookmark - Hongkiat<\/title>\n<meta name=\"description\" content=\"As people tend to more easily perceive things that move, smartly used animations can enhance the user experience of a site by drawing attention to\" \/>\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\/css3-animation-tools\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10 CSS3 Animation Tools You Should Bookmark\" \/>\n<meta property=\"og:description\" content=\"As people tend to more easily perceive things that move, smartly used animations can enhance the user experience of a site by drawing attention to\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css3-animation-tools\/\" \/>\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=\"2016-01-05T15:01:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-14T10:15:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css3-animation-tools\/css3gen.jpg\" \/>\n<meta name=\"author\" content=\"Anna Monus\" \/>\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=\"Anna Monus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-animation-tools\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-animation-tools\\\/\"},\"author\":{\"name\":\"Anna Monus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\"},\"headline\":\"10 CSS3 Animation Tools You Should Bookmark\",\"datePublished\":\"2016-01-05T15:01:14+00:00\",\"dateModified\":\"2022-10-14T10:15:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-animation-tools\\\/\"},\"wordCount\":959,\"commentCount\":16,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-animation-tools\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-animation-tools\\\/css3gen.jpg\",\"keywords\":[\"CSS\",\"CSS Animation\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-animation-tools\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-animation-tools\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-animation-tools\\\/\",\"name\":\"10 CSS3 Animation Tools You Should Bookmark - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-animation-tools\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-animation-tools\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-animation-tools\\\/css3gen.jpg\",\"datePublished\":\"2016-01-05T15:01:14+00:00\",\"dateModified\":\"2022-10-14T10:15:39+00:00\",\"description\":\"As people tend to more easily perceive things that move, smartly used animations can enhance the user experience of a site by drawing attention to\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-animation-tools\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-animation-tools\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-animation-tools\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-animation-tools\\\/css3gen.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-animation-tools\\\/css3gen.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-animation-tools\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"10 CSS3 Animation Tools You Should Bookmark\"}]},{\"@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\\\/a601053a0ab457901e00cdc83bd5359e\",\"name\":\"Anna Monus\",\"description\":\"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.\",\"sameAs\":[\"https:\\\/\\\/www.annalytic.com\\\/\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/anna_monus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"10 CSS3 Animation Tools You Should Bookmark - Hongkiat","description":"As people tend to more easily perceive things that move, smartly used animations can enhance the user experience of a site by drawing attention to","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\/css3-animation-tools\/","og_locale":"en_US","og_type":"article","og_title":"10 CSS3 Animation Tools You Should Bookmark","og_description":"As people tend to more easily perceive things that move, smartly used animations can enhance the user experience of a site by drawing attention to","og_url":"https:\/\/www.hongkiat.com\/blog\/css3-animation-tools\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-01-05T15:01:14+00:00","article_modified_time":"2022-10-14T10:15:39+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css3-animation-tools\/css3gen.jpg","type":"","width":"","height":""}],"author":"Anna Monus","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Anna Monus","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css3-animation-tools\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-animation-tools\/"},"author":{"name":"Anna Monus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e"},"headline":"10 CSS3 Animation Tools You Should Bookmark","datePublished":"2016-01-05T15:01:14+00:00","dateModified":"2022-10-14T10:15:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-animation-tools\/"},"wordCount":959,"commentCount":16,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-animation-tools\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-animation-tools\/css3gen.jpg","keywords":["CSS","CSS Animation"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css3-animation-tools\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css3-animation-tools\/","url":"https:\/\/www.hongkiat.com\/blog\/css3-animation-tools\/","name":"10 CSS3 Animation Tools You Should Bookmark - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-animation-tools\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-animation-tools\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-animation-tools\/css3gen.jpg","datePublished":"2016-01-05T15:01:14+00:00","dateModified":"2022-10-14T10:15:39+00:00","description":"As people tend to more easily perceive things that move, smartly used animations can enhance the user experience of a site by drawing attention to","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-animation-tools\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css3-animation-tools\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css3-animation-tools\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css3-animation-tools\/css3gen.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-animation-tools\/css3gen.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css3-animation-tools\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"10 CSS3 Animation Tools You Should Bookmark"}]},{"@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\/a601053a0ab457901e00cdc83bd5359e","name":"Anna Monus","description":"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.","sameAs":["https:\/\/www.annalytic.com\/"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/anna_monus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6Cc","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25432","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\/146"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=25432"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25432\/revisions"}],"predecessor-version":[{"id":62794,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/25432\/revisions\/62794"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=25432"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=25432"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=25432"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=25432"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}