{"componentChunkName":"component---src-templates-tailwindclass-js","path":"/tailwindcss/classes/tailwind-animation/","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"4738cbf0-478d-5b9b-90cf-7f9a65f4b3f2","title":"Tailwind Animation","slug":"/classes/tailwind-animation/"},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"lastUpdated\": \"10 May 2024\",\n  \"title\": \"Tailwind Animation\",\n  \"metaTitle\": \"Tailwind CSS Animation\",\n  \"metaDescription\": \"Tailwind CSS provides a powerful and customizable set of utility classes for adding animations to your web pages. With Tailwind animation classes, you can easily add eye-catching motion effects to elements, creating engaging and interactive user experiences.\",\n  \"canonicalUrl\": \"https://windframe.dev/tailwind/classes/tailwind-animation\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Tailwind Animation\"), mdx(\"p\", null, \"Tailwind CSS provides a powerful and customizable set of utility classes for adding animations to your web pages. With Tailwind's animation classes, you can easily add eye-catching motion effects to elements, creating engaging and interactive user experiences.\"), mdx(\"h2\", null, \"Applying Tailwind Animation\"), mdx(\"p\", null, \"To apply animations in Tailwind CSS, you can use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"animate-{name}\"), \" utility class, where {name} represents the name of the animation. Tailwind CSS includes a variety of predefined animation classes that you can use out of the box.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"animate-pulse ...\\\">\\n  This element will pulse with animation.\\n</div>\\n\")), mdx(\"h2\", null, \"Preview\"), mdx(\"div\", {\n    className: \"rounded-t-xl overflow-hidden bg-blue-100 p-10 \"\n  }, mdx(\"div\", {\n    className: \"animate-pulse rounded-md text-white text-center font-extrabold bg-blue-600 h-11 flex justify-center items-center\"\n  }, \"This element will pulse with animation.\")), mdx(\"h2\", null, \"Predefined Tailwind Animation Classes\"), mdx(\"p\", null, \"Tailwind CSS provides several predefined animation classes that you can use without any additional configuration. Some of the commonly used ones include:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"animate-pulse\"), \": Causes the element to continuously fade in and out, creating a pulsating effect.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"animate-spin\"), \": Rotates the element 360 degrees in a clockwise direction.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"animate-bounce\"), \": Causes the element to bounce up and down.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"animate-blink\"), \": Creates a blinking effect, where the element alternates between visible and hidden states.\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"animate-slide-{direction}\"), \": Slides the element in the specified direction, such as animate-slide-left, animate-slide-right, animate-slide-up, animate-slide-down.\"))), mdx(\"h2\", null, \"Customizing Tailwind Animation\"), mdx(\"p\", null, \"Tailwind CSS also allows you to define your own custom Tailwind animation using the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"@keyframes\"), \" directive in your CSS. This gives you complete control over the animation properties, timing, and effects. Here's an example:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<style>\\n  @keyframes slide-in {\\n    0% {\\n      transform: translateX(-100%);\\n      opacity: 0;\\n    }\\n    100% {\\n      transform: translateX(0);\\n      opacity: 1;\\n    }\\n  }\\n</style>\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"animate-slide-in\\\">\\n  This element will slide in with a custom animation.\\n</div>\\n\")), mdx(\"p\", null, \"In the above example, a custom tailwind animation called \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"slide-in\"), \" is defined using the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"@keyframes\"), \" directive. The animation gradually moves the element from left to right and fades it in. The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"animate-slide-in\"), \" class is then applied to the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<div>\"), \" element to animate it using the custom tailwind animation.\"), mdx(\"h2\", null, \"Responsive Tailwind Animation\"), mdx(\"p\", null, \"Tailwind CSS allows you to apply animations responsively at different breakpoints. To use responsive tailwind animation classes, you can append the breakpoint prefix to the animation class. For example, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"md:animate-pulse\"), \" applies the pulse animation starting from the medium breakpoint and above.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"animate-pulse md:animate-none\\\">\\n  This element will pulse by default, but the animation will be disabled starting from the medium\\n  breakpoint.\\n</div>\\n\")), mdx(\"p\", null, \"In the above example, the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"animate-pulse\"), \" class is applied by default, causing the element to pulse. However, starting from the medium breakpoint and above \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"(md:animate-none)\"), \", the animation is disabled.\"), mdx(\"h2\", null, \"Tailwind Animation Class Table\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Class\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Properties\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \".animate-none\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"animation: none;\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \".animate-spin\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"animation: spin 1s linear infinite;\", mdx(\"br\", null), \"@keyframes spin {\", mdx(\"br\", null), \"from { \", mdx(\"br\", null), \"transform: rotate(0deg);\", mdx(\"br\", null), \"}\", mdx(\"br\", null), \"to {transform: rotate(360deg);\", mdx(\"br\", null), \"}\", mdx(\"br\", null), \"}\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \".animate-ping\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;\", mdx(\"br\", null), \"@keyframes ping {\", mdx(\"br\", null), \"75%,100%{transform: scale(2);opacity: 0;\", mdx(\"br\", null), \"}\", mdx(\"br\", null), \"}\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \".animate-pulse\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\", mdx(\"br\", null), \"@keyframes pulse\", mdx(\"br\", null), \"{\", mdx(\"br\", null), \"0%,100%{opacity: 1;\", mdx(\"br\", null), \"}\", mdx(\"br\", null), \"}\")))), mdx(\"h2\", null, \"Windframe Tailwind blocks\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://app.windframe.dev/editor?id=header17\"\n  }, \"landing page\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#tailwind-animation","title":"Tailwind Animation","items":[{"url":"#applying-tailwind-animation","title":"Applying Tailwind Animation"},{"url":"#preview","title":"Preview"},{"url":"#predefined-tailwind-animation-classes","title":"Predefined Tailwind Animation Classes"},{"url":"#customizing-tailwind-animation","title":"Customizing Tailwind Animation"},{"url":"#responsive-tailwind-animation","title":"Responsive Tailwind Animation"},{"url":"#tailwind-animation-class-table","title":"Tailwind Animation Class Table"},{"url":"#windframe-tailwind-blocks","title":"Windframe Tailwind blocks"}]}]},"parent":{"__typename":"File","relativePath":"classes/tailwind-animation.md"},"frontmatter":{"githubUrl":null,"metaTitle":"Tailwind CSS Animation","lastUpdated":"10 May 2024","metaDescription":"Tailwind CSS provides a powerful and customizable set of utility classes for adding animations to your web pages. With Tailwind animation classes, you can easily add eye-catching motion effects to elements, creating engaging and interactive user experiences."}}},"pageContext":{"id":"4738cbf0-478d-5b9b-90cf-7f9a65f4b3f2"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","2619113677","3309287076","3309287076","3706406642","3706406642","3706406642","4045616534","4045616534","956403285"]}