{"id":74174,"date":"2025-10-10T21:00:36","date_gmt":"2025-10-10T13:00:36","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=74174"},"modified":"2025-10-01T16:04:28","modified_gmt":"2025-10-01T08:04:28","slug":"tailwindcss-animation-tutorial","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/tailwindcss-animation-tutorial\/","title":{"rendered":"How to Add Animation with TailwindCSS"},"content":{"rendered":"<p>Adding animations can be a great way to make your website feel more alive and enjoyable. They can be used to provide helpful feedback, guide users\u2019 attention to important elements, and make your interface feel more intuitive and responsive.<\/p>\n<p>If you use <a href=\"https:\/\/tailwindcss.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Tailwind CSS<\/a> to build your websites, you don\u2019t need to start from scratch as it already comes with built-in utilities and tools that make creating and customizing animations as easy as adding a few classes to your HTML.<\/p>\n<p>In this article, we\u2019ll walk through several ways how you can add animations to your project with TailwindCSS.<\/p>\n<p>Without further ado, let\u2019s get started!<\/p>\n<hr>\n<h2>Built-in Utilities<\/h2>\n<p>Tailwind CSS includes a variety of pre-configured utilities out of the box that you can use right away on elements of your website.<\/p>\n<table>\n<thead>\n<tr>\n<th>Utility<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>animate-bounce<\/code><\/td>\n<td>Bounces an element up and down<\/td>\n<\/tr>\n<tr>\n<td><code>animate-pulse<\/code><\/td>\n<td>Makes an element fade in and out subtly<\/td>\n<\/tr>\n<tr>\n<td><code>animate-spin<\/code><\/td>\n<td>Spins an element continuously<\/td>\n<\/tr>\n<tr>\n<td><code>animate-ping<\/code><\/td>\n<td>Scaling an element up and down<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>For example, to make an element bounce up and down, you can simply add the <code>animate-bounce<\/code> class to it:<\/p>\n<p>  <iframe src=\"https:\/\/codesandbox.io\/embed\/pkmrnv?view=preview&module=%2Findex.html\" style=\"width:100%; height: 300px; border:0; border-radius: 4px; overflow:hidden;\" title=\"tailwindcss-animations-builtin\" allow=\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\" sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"><\/iframe><\/p>\n<p>In this case, the class will move our element up and down infinitely, with the specified duration and easing function.<\/p>\n<p>As mentioned, these animations are pre-configured. If you want more control over the animations, you should consider creating your own custom utilities.<\/p>\n<p>Let\u2019s see how to do it!<\/p>\n<hr>\n<h2>Creating Custom Animations<\/h2>\n<p>There are several ways to add your own custom animations.<\/p>\n<p>First, we can specify keyframes, durations, and easing functions to create unique effects using the <code>animate-<\/code> property, as follows.<\/p>\n<pre>\r\nanimate-[&lt;animation&gt;_&lt;duration&gt;_&lt;easing&gt;_&lt;delay&gt;_&lt;iteration&gt;]\r\n<\/pre>\n<p>To do this, we need to add the animation keyframes to our stylesheet. For example, below, I have a keyframe named <code>tada<\/code>, which will scale an element up and down while also rotating it slightly to the right and left, as if making a surprise gesture.<\/p>\n<pre>\r\n@keyframes tada {\r\n  from {\r\n    transform: scale3d(1, 1, 1);\r\n  }\r\n\r\n  10%,\r\n  20% {\r\n    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);\r\n  }\r\n\r\n  30%,\r\n  50%,\r\n  70%,\r\n  90% {\r\n    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);\r\n  }\r\n\r\n  40%,\r\n  60%,\r\n  80% {\r\n    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);\r\n  }\r\n\r\n  to {\r\n    transform: scale3d(1, 1, 1);\r\n  }\r\n}\r\n<\/pre>\n<p>To apply this keyframe, you could add the following class to your element:<\/p>\n<pre>\r\n&lt;div class=\"animate-[tada_1s_ease-in-out_1s] ...\"&gt;\r\n    ...\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>Although this works well, adding a custom animation like this can be a bit cumbersome, especially if you will add it across multiple elements. Fortunately, TailwindCSS provides a more convenient way to handle this.<\/p>\n<p>So, alternatively, we can define the animation as a custom property. For example, let\u2019s call it <code>--animate-tada<\/code>, and set its value to include the animation name, duration, easing function, and delay.<\/p>\n<pre>\r\n:root {\r\n  --animate-tada: tada 1s ease-in-out 1s;\r\n}\r\n@keyframes tada {\r\n  ...\r\n}\r\n<\/pre>\n<p>Now we can apply it with the shorthand <code>animate-[--animate-tada]<\/code> instead of writing all the values directly:<\/p>\n<pre>\r\n&lt;div class=\"animate-[--animate-tada] ...\"&gt;\r\n    ...\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>I think this is now much more manageable than adding the animation values directly to the element. It allows you to easily reuse the same animation across multiple elements without repeating the same values.<\/p>\n<p>Here\u2019s how it looks in action:<\/p>\n<p>  <iframe src=\"https:\/\/codesandbox.io\/embed\/7cd9ld?view=preview&module=%2Findex.html\" style=\"width:100%; height: 300px; border:0; border-radius: 4px; overflow:hidden;\" title=\"tailwindcss-animations-builtin-customized-2\" allow=\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\" sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"><\/iframe><\/p>\n<p>But, let\u2019s make it simpler with a custom utility class for our animation. Instead of adding the custom property, what if we could simply add a class <code>animate-tada<\/code>?<\/p>\n<p>To create one, we can wrap the keyframes and the custom property definition within <code>@theme<\/code> in our main stylesheet.<\/p>\n<pre>\r\n@theme {\r\n  --animate-tada: tada 1s ease-in-out 1s;\r\n  @keyframes tada {\r\n    ...\r\n  }\r\n}\r\n<\/pre>\n<p>Use the Tailwind CLI to build the main CSS.<\/p>\n<pre>\r\nnpx @tailwindcss\/cli -i .\/main.css -o .\/build.css\r\n<\/pre>\n<p>It will generate the necessary classes for you that you can simply add the <code>animate-tada<\/code> class to your element:<\/p>\n<pre>\r\n&lt;div class=\"animate-tada ...\"&gt;\r\n    ...\r\n&lt;\/div&gt;\r\n<\/pre>\n<hr>\n<h2>More Animations<\/h2>\n<p>One of the great things about TailwindCSS is its ecosystem of extensions or addons. So instead of creating every animation from scratch, you can install plugins that provide additional animations out of the box. This will save you time and effort in implementing complex animations.<\/p>\n<p>Here are a few popular ones that you might find useful:<\/p>\n<h3><a href=\"https:\/\/www.npmjs.com\/package\/tailwindcss-motion\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">tailwindcss-motion<\/a><\/h3>\n<p><strong>tailwindcss-motion<\/strong> is a Tailwind CSS plugin that makes adding complex animations simpler. It gives you an easy syntax for defining the motion effects and comes with built-in presets you can use right away.<\/p>\n<p>It also provides an easy-to-use GUI where you can tweak how animations look and feel, so you get smooth, polished effects, and then simply copy and paste the classes.<\/p>\n<figure>\n    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/tailwindcss-animation-tutorial\/tailwindcss-motion.jpg\" alt=\"TailwindCSS Motion GUI Animation Interface\" width=\"1000\" height=\"600\">\n  <\/figure>\n<h3><a href=\"https:\/\/github.com\/midudev\/tailwind-animations\" target=\"_blank\" rel=\"noopener noreferrer\">@midudev\/tailwind-animations<\/a><\/h3>\n<p>This library is a Tailwind CSS plugin that provides a set of pre-configured common animations including fade-in, fade-out, slide-in, zoom, rotate, bounce, shake, swing, and many more. Check out the demo <a href=\"https:\/\/tailwindcss-animations.vercel.app\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>.<\/p>\n<figure>\n    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/tailwindcss-animation-tutorial\/midudev-tailwind-animations.jpg\" alt=\"Midudev Tailwind Animation Demo Examples\" width=\"1000\" height=\"600\">\n  <\/figure>\n<h3><a href=\"https:\/\/www.npmjs.com\/package\/tw-animate-css\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">tw-animate-css<\/a><\/h3>\n<p><strong>tw-animate-css<\/strong> is <strong>for Tailwind CSS 4<\/strong>, and one of the most popular and downloaded.<\/p>\n<p>It makes adding animations to your Tailwind CSS projects easy. It gives you ready-to-use utilities for smooth effects like fade-ins, zooms, and slides. You can also fine-tune the details, like animation duration, delay, and other properties.<\/p>\n<h3><a href=\"https:\/\/www.npmjs.com\/package\/tailwindcss-animated\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">tailwind-animated<\/a><\/h3>\n<p>Another Tailwind CSS plugin that you could consider is <strong>tailwindcss-animated<\/strong>. It provides various utility classes and several ready-to-use CSS animations that extend the basic animation capabilities of Tailwind CSS. <strong>It\u2019s compatible with Tailwind CSS 3 and 4<\/strong>.<\/p>\n<hr>\n<h2>Wrapping up<\/h2>\n<p>Animations are a great way to make your site feel more lively and engaging. With Tailwind CSS and the plugins, adding smooth motion can be as easy as dropping in a few classes.<\/p>\n<p>Whether you prefer creating your own utilities or taking advantage of ready-made plugins, Tailwind gives you the flexibility to add polished, professional-looking animations that bring your site to life, and hopefully, this article can help you get started.<\/p>","protected":false},"excerpt":{"rendered":"<p>Adding animations can be a great way to make your website feel more alive and enjoyable. They can be used to provide helpful feedback, guide users\u2019 attention to important elements, and make your interface feel more intuitive and responsive. If you use Tailwind CSS to build your websites, you don\u2019t need to start from scratch&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[1096,3498],"topic":[],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Add Animation with TailwindCSS - Hongkiat<\/title>\n<meta name=\"description\" content=\"Adding animations can be a great way to make your website feel more alive and enjoyable. They can be used to provide helpful feedback, guide users&#039;\" \/>\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\/tailwindcss-animation-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add Animation with TailwindCSS\" \/>\n<meta property=\"og:description\" content=\"Adding animations can be a great way to make your website feel more alive and enjoyable. They can be used to provide helpful feedback, guide users&#039;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/tailwindcss-animation-tutorial\/\" \/>\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=\"2025-10-10T13:00:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/tailwindcss-animation-tutorial\/tailwindcss-motion.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tailwindcss-animation-tutorial\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tailwindcss-animation-tutorial\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"How to Add Animation with TailwindCSS\",\"datePublished\":\"2025-10-10T13:00:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tailwindcss-animation-tutorial\\\/\"},\"wordCount\":821,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tailwindcss-animation-tutorial\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/tailwindcss-animation-tutorial\\\/tailwindcss-motion.jpg\",\"keywords\":[\"Animation UI\",\"CSS Animation\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tailwindcss-animation-tutorial\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tailwindcss-animation-tutorial\\\/\",\"name\":\"How to Add Animation with TailwindCSS - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tailwindcss-animation-tutorial\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tailwindcss-animation-tutorial\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/tailwindcss-animation-tutorial\\\/tailwindcss-motion.jpg\",\"datePublished\":\"2025-10-10T13:00:36+00:00\",\"description\":\"Adding animations can be a great way to make your website feel more alive and enjoyable. They can be used to provide helpful feedback, guide users'\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tailwindcss-animation-tutorial\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tailwindcss-animation-tutorial\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tailwindcss-animation-tutorial\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/tailwindcss-animation-tutorial\\\/tailwindcss-motion.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/tailwindcss-animation-tutorial\\\/tailwindcss-motion.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tailwindcss-animation-tutorial\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Add Animation with TailwindCSS\"}]},{\"@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\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Add Animation with TailwindCSS - Hongkiat","description":"Adding animations can be a great way to make your website feel more alive and enjoyable. They can be used to provide helpful feedback, guide users'","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\/tailwindcss-animation-tutorial\/","og_locale":"en_US","og_type":"article","og_title":"How to Add Animation with TailwindCSS","og_description":"Adding animations can be a great way to make your website feel more alive and enjoyable. They can be used to provide helpful feedback, guide users'","og_url":"https:\/\/www.hongkiat.com\/blog\/tailwindcss-animation-tutorial\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2025-10-10T13:00:36+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/tailwindcss-animation-tutorial\/tailwindcss-motion.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/tailwindcss-animation-tutorial\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/tailwindcss-animation-tutorial\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"How to Add Animation with TailwindCSS","datePublished":"2025-10-10T13:00:36+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/tailwindcss-animation-tutorial\/"},"wordCount":821,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/tailwindcss-animation-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/tailwindcss-animation-tutorial\/tailwindcss-motion.jpg","keywords":["Animation UI","CSS Animation"],"articleSection":["Coding"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/tailwindcss-animation-tutorial\/","url":"https:\/\/www.hongkiat.com\/blog\/tailwindcss-animation-tutorial\/","name":"How to Add Animation with TailwindCSS - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/tailwindcss-animation-tutorial\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/tailwindcss-animation-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/tailwindcss-animation-tutorial\/tailwindcss-motion.jpg","datePublished":"2025-10-10T13:00:36+00:00","description":"Adding animations can be a great way to make your website feel more alive and enjoyable. They can be used to provide helpful feedback, guide users'","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/tailwindcss-animation-tutorial\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/tailwindcss-animation-tutorial\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/tailwindcss-animation-tutorial\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/tailwindcss-animation-tutorial\/tailwindcss-motion.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/tailwindcss-animation-tutorial\/tailwindcss-motion.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/tailwindcss-animation-tutorial\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Add Animation with TailwindCSS"}]},{"@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\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-jim","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/74174","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\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=74174"}],"version-history":[{"count":1,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/74174\/revisions"}],"predecessor-version":[{"id":74175,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/74174\/revisions\/74175"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=74174"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=74174"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=74174"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=74174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}