{"id":19703,"date":"2020-06-17T21:32:18","date_gmt":"2020-06-17T13:32:18","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=19703"},"modified":"2020-06-17T19:42:04","modified_gmt":"2020-06-17T11:42:04","slug":"animatecss-css3-animation-library","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/animatecss-css3-animation-library\/","title":{"rendered":"Create Animation in CSS Easily with Animate.css"},"content":{"rendered":"<p>CSS has improved with many features which make web development much more interesting and challenging. One of these features is <strong>CSS3 animation effects<\/strong>. Before CSS3, to create an animation you can only work with Javascript. But now you can create it easily with CSS3.<\/p>\n<p>We have walked you through with a good tutorial of <a href=\"https:\/\/www.hongkiat.com\/blog\/css3-bounce-effect\/\">creating Bounce Effect with CSS3<\/a> previously, and in this post I will introduce to you an awesome library that will make animation creation with CSS3 even easier: <a href=\"https:\/\/animate.style\/\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">Animate.css<\/a><strong>.<\/strong><\/p>\n<p>Animate.css is a ready-to-use library <strong>collection of CSS3 animation effects<\/strong>. This library supplies you with <strong>over 50 different animation effects<\/strong> which work consistently on most all browsers with CSS3 support.<\/p>\n<p>You can then apply the animation on your text, picture, form and so on. There are also many great sites using this librar; <a href=\"http:\/\/tridiv.com\/\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">Tridiv<\/a> \u2013 the best CSS 3D editor on the web \u2013 is one of them.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/css3-animation-tools\/\" class=\"ref-block__link\" title=\"Read More: 10 CSS3 Animation Tools You Should Bookmark\" rel=\"bookmark\"><span class=\"screen-reader-text\">10 CSS3 Animation Tools You Should Bookmark<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css3-animation-tools.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-25432 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css3-animation-tools.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">10 CSS3 Animation Tools You Should Bookmark<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tAs people tend to more easily perceive things that move, smartly used animations can enhance the user experience...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Getting Started<\/h2>\n<p>With Animate.css, all you have to do is to <strong>include the appropriate classes with your elements<\/strong>. To get started, firstly <strong>include the animate.css file into the head<\/strong>. You can download the complete library from the Github <a href=\"https:\/\/raw.github.com\/daneden\/animate.css\/master\/animate.css\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">repository page<\/a>.<\/p>\n<p>By default, Animate.css will <strong>animate only once upon the first page load<\/strong>. It will then stay static. To be able to control the animation, we\u2019re going to need a little Javascript. In this matter, we\u2019ll <strong>include a jQuery<\/strong> into the project, like so.<\/p>\n<pre>\r\n&lt;head&gt;\r\n...\r\n    &lt;link rel=\"stylesheet\" type=\"text\/css\" media=\"all\" href=\"css\/animate.css\"&gt;\r\n    &lt;script type=\"text\/javascript\" src=\"http:\/\/code.jquery.com\/jquery-latest.min.js\"&gt;&lt;\/script&gt;\r\n...\r\n&lt;\/head&gt;\r\n<\/pre>\n<h2>HTML Markup<\/h2>\n<p>To apply the animation you have to add <code>.animated<\/code> class to the element you want to animate, along with the animation name like so.<\/p>\n<pre>\r\n&lt;div class=\"option animated wobble\"&gt;This text will animate.&lt;\/div&gt;\r\n<\/pre>\n<p>That\u2019s it! The animation will only be implemented on the page load, so you may also need to use Javascript to apply the animation upon a  event trigger. The <code>.option<\/code> can also be customized to fit your needs.<\/p>\n<h2>Additional CSS Options<\/h2>\n<p>The animation we have defined previously will loop only once and upon a predefined duration and delay time as well. If you need more loops or a different duration or delay time, here\u2019s how to customize this.<\/p>\n<p>To let the animation loop multiple times or even infinitely, you can use <code>animation-iteration-count<\/code> attribute. Make sure to also include applicable vendor prefixes like webkit, moz, etc. To make it infinite, then add <code>infinite<\/code> as the value.<\/p>\n<p>If you need it to loop only several times, just input the value with the number of loops you want.<\/p>\n<pre>\r\n-vendor-animation-iteration-count: infinite | &lt;number&gt;;\r\n<\/pre>\n<p>To customize the duration, the appropriate attribute to use is <code>animation-duration<\/code>; and it\u2019s <code>animation-delay<\/code> for delay control. The following is a sample option code.<\/p>\n<pre>\r\n.option {\r\n    -webkit-animation-duration: 3s;\r\n    -webkit-animation-delay: 2s;\r\n    -webkit-animation-iteration-count: 5;\r\n}\r\n<\/pre>\n<h2>Javascript Control<\/h2>\n<p>For more control on the animation state, we need a little help from Javascript. Let\u2019s say we want a text link to trigger an animation upon a click. Firstly, we need to add a reference into the link, like so.<\/p>\n<pre>\r\n&lt;div class=\"demo animated\"&gt;\r\n    &lt;p&gt;This text will animate. &lt;a href=\"\" id=\"ref\"&gt;Click to animate!&lt;\/a&gt;&lt;\/p&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>To use the <code>click<\/code> function, include the link reference into it.<\/p>\n<p>With Javascript, you can define the animation name. We\u2019ll use an approach by creating an <code>animate<\/code> function, and naming the animation along with the element class (in the above code, we have added the <code>demo<\/code> attribute).<\/p>\n<p>And the Javascript code will like the following.<\/p>\n<pre>\r\n&lt;script language=\"javascript\"&gt;\r\n    $(function() {\r\n        $(\"#ref\").click(function() {\r\n            animate(\".demo\", 'bounce');\r\n            return false;\r\n        });\r\n    });\r\n    \r\n    function animate(element_ID, animation) {\r\n        $(element_ID).addClass(animation);\r\n        var wait = window.setTimeout( function(){\r\n            $(element_ID).removeClass(animation)}, 1300\r\n        );\r\n    }\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>Animation effect, indeed, is one of the best ways to <strong>make your site more attractive<\/strong> but remember to not overdo it.<\/p>","protected":false},"excerpt":{"rendered":"<p>CSS has improved with many features which make web development much more interesting and challenging. One of these features is CSS3 animation effects. Before CSS3, to create an animation you can only work with Javascript. But now you can create it easily with CSS3. We have walked you through with a good tutorial of creating&hellip;<\/p>\n","protected":false},"author":136,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[507,3498,4109],"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>Create Animation in CSS Easily with Animate.css - Hongkiat<\/title>\n<meta name=\"description\" content=\"CSS has improved with many features which make web development much more interesting and challenging. One of these features is CSS3 animation effects.\" \/>\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\/animatecss-css3-animation-library\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Animation in CSS Easily with Animate.css\" \/>\n<meta property=\"og:description\" content=\"CSS has improved with many features which make web development much more interesting and challenging. One of these features is CSS3 animation effects.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/animatecss-css3-animation-library\/\" \/>\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=\"2020-06-17T13:32:18+00:00\" \/>\n<meta name=\"author\" content=\"Irfan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@IrfanFza\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Irfan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/animatecss-css3-animation-library\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/animatecss-css3-animation-library\\\/\"},\"author\":{\"name\":\"Irfan\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/483b1092b8017f37d977331e91935d8c\"},\"headline\":\"Create Animation in CSS Easily with Animate.css\",\"datePublished\":\"2020-06-17T13:32:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/animatecss-css3-animation-library\\\/\"},\"wordCount\":552,\"commentCount\":19,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"keywords\":[\"CSS\",\"CSS Animation\",\"CSS Frameworks\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/animatecss-css3-animation-library\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/animatecss-css3-animation-library\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/animatecss-css3-animation-library\\\/\",\"name\":\"Create Animation in CSS Easily with Animate.css - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"datePublished\":\"2020-06-17T13:32:18+00:00\",\"description\":\"CSS has improved with many features which make web development much more interesting and challenging. One of these features is CSS3 animation effects.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/animatecss-css3-animation-library\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/animatecss-css3-animation-library\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/animatecss-css3-animation-library\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create Animation in CSS Easily with Animate.css\"}]},{\"@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\\\/483b1092b8017f37d977331e91935d8c\",\"name\":\"Irfan\",\"description\":\"Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/IrfanFza\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/irfan_fauzii\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Create Animation in CSS Easily with Animate.css - Hongkiat","description":"CSS has improved with many features which make web development much more interesting and challenging. One of these features is CSS3 animation effects.","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\/animatecss-css3-animation-library\/","og_locale":"en_US","og_type":"article","og_title":"Create Animation in CSS Easily with Animate.css","og_description":"CSS has improved with many features which make web development much more interesting and challenging. One of these features is CSS3 animation effects.","og_url":"https:\/\/www.hongkiat.com\/blog\/animatecss-css3-animation-library\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2020-06-17T13:32:18+00:00","author":"Irfan","twitter_card":"summary_large_image","twitter_creator":"@IrfanFza","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Irfan","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/animatecss-css3-animation-library\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/animatecss-css3-animation-library\/"},"author":{"name":"Irfan","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/483b1092b8017f37d977331e91935d8c"},"headline":"Create Animation in CSS Easily with Animate.css","datePublished":"2020-06-17T13:32:18+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/animatecss-css3-animation-library\/"},"wordCount":552,"commentCount":19,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"keywords":["CSS","CSS Animation","CSS Frameworks"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/animatecss-css3-animation-library\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/animatecss-css3-animation-library\/","url":"https:\/\/www.hongkiat.com\/blog\/animatecss-css3-animation-library\/","name":"Create Animation in CSS Easily with Animate.css - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"datePublished":"2020-06-17T13:32:18+00:00","description":"CSS has improved with many features which make web development much more interesting and challenging. One of these features is CSS3 animation effects.","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/animatecss-css3-animation-library\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/animatecss-css3-animation-library\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/animatecss-css3-animation-library\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create Animation in CSS Easily with Animate.css"}]},{"@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\/483b1092b8017f37d977331e91935d8c","name":"Irfan","description":"Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.","sameAs":["https:\/\/x.com\/IrfanFza"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/irfan_fauzii\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-57N","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19703","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\/136"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=19703"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19703\/revisions"}],"predecessor-version":[{"id":50681,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19703\/revisions\/50681"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=19703"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=19703"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=19703"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=19703"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}