"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8237],{3905:function(e,t,n){n.d(t,{Zo:function(){return m},kt:function(){return u}});var a=n(7294);function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function o(e,t){if(null==e)return{};var n,a,i=function(e,t){if(null==e)return{};var n,a,i={},r=Object.keys(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var p=a.createContext({}),s=function(e){var t=a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},m=function(e){var t=s(e.components);return a.createElement(p.Provider,{value:t},e.children)},c={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},d=a.forwardRef((function(e,t){var n=e.components,i=e.mdxType,r=e.originalType,p=e.parentName,m=o(e,["components","mdxType","originalType","parentName"]),d=s(n),u=i,f=d["".concat(p,".").concat(u)]||d[u]||c[u]||r;return n?a.createElement(f,l(l({ref:t},m),{},{components:n})):a.createElement(f,l({ref:t},m))}));function u(e,t){var n=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var r=n.length,l=new Array(r);l[0]=d;var o={};for(var p in t)hasOwnProperty.call(t,p)&&(o[p]=t[p]);o.originalType=e,o.mdxType="string"==typeof e?e:i,l[1]=o;for(var s=2;s<r;s++)l[s]=n[s];return a.createElement.apply(null,l)}return a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},2695:function(e,t,n){n.d(t,{Z:function(){return o}});var a=n(7462),i=n(3366),r=n(7294),l=["isBad","isGood","children","disableFullscreen","limitWidth"];function o(e){var t=e.isBad,n=e.isGood,o=e.children,p=e.disableFullscreen,s=e.limitWidth,m=(0,i.Z)(e,l),c=(0,r.useState)(!1),d=c[0],u=c[1];return r.createElement("div",{className:"preview-box-wrapper",style:s?{width:s,display:"table",margin:"0 auto"}:{}},!p&&r.createElement("button",{"aria-label":d?"Minimize the example":"Fullscreen the example",className:"preview-box-fullscreen-toggle",onClick:function(e){var t=e.target.closest(".preview-box-wrapper");d?document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.msExitFullscreen&&document.msExitFullscreen():t.requestFullscreen?t.requestFullscreen():t.webkitRequestFullscreen?t.webkitRequestFullscreen():t.msRequestFullscreen&&t.msRequestFullscreen(),u(!d)}},d?r.createElement("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"0 0 24 24"},r.createElement("path",{d:"M19.707 18.293a1 1 0 01-1.414 1.414L16 17.414V18a1 1 0 01-2 0v-3a1 1 0 011-1h3a1 1 0 010 2h-.586zM9 14H6a1 1 0 000 2h.586l-2.293 2.293a1 1 0 001.414 1.414L8 17.414V18a1 1 0 002 0v-3a1 1 0 00-1-1zm0-9a1 1 0 00-1 1v.586L5.707 4.293a1 1 0 00-1.414 1.414L6.586 8H6a1 1 0 000 2h3a1 1 0 001-1V6a1 1 0 00-1-1zm6 5h3a1 1 0 000-2h-.586l2.293-2.293a1 1 0 00-1.414-1.414L16 6.586V6a1 1 0 00-2 0v3a1 1 0 001 1z"})):r.createElement("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"26 26 48 48"},r.createElement("path",{d:"M54.347 57.882A8.96 8.96 0 0150 59a8.96 8.96 0 01-4.347-1.118L40.736 62.8c-.38.38-.257.701.29.701h.98A2.503 2.503 0 0144.5 66c0 1.39-1.122 2.5-2.507 2.5h-7.986a2.505 2.505 0 01-2.507-2.507v-7.986A2.502 2.502 0 0134 55.5a2.49 2.49 0 012.5 2.493v.98c0 .547.314.678.7.29l4.918-4.916A8.96 8.96 0 0141 50a8.96 8.96 0 011.118-4.347L37.2 40.736c-.38-.38-.701-.257-.701.29v.98A2.503 2.503 0 0134 44.5c-1.39 0-2.5-1.122-2.5-2.507v-7.986a2.505 2.505 0 012.507-2.507h7.986A2.502 2.502 0 0144.5 34a2.49 2.49 0 01-2.493 2.5h-.98c-.547 0-.678.314-.29.7l4.916 4.918A8.96 8.96 0 0150 41a8.96 8.96 0 014.347 1.118l4.917-4.917c.38-.38.257-.701-.29-.701h-.98A2.503 2.503 0 0155.5 34c0-1.39 1.122-2.5 2.507-2.5h7.986a2.505 2.505 0 012.507 2.507v7.986A2.502 2.502 0 0166 44.5a2.49 2.49 0 01-2.5-2.493v-.98c0-.547-.314-.678-.7-.29l-4.918 4.916A8.96 8.96 0 0159 50a8.96 8.96 0 01-1.118 4.347l4.917 4.917c.38.38.701.257.701-.29v-.98A2.503 2.503 0 0166 55.5c1.39 0 2.5 1.122 2.5 2.507v7.986a2.505 2.505 0 01-2.507 2.507h-7.986A2.502 2.502 0 0155.5 66a2.49 2.49 0 012.493-2.5h.98c.547 0 .678-.314.29-.7l-4.916-4.918zM50 54a4 4 0 100-8 4 4 0 000 8z"}))),t&&r.createElement("div",{className:"is-bad-example style-red"},r.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"2 2 12 12"},r.createElement("path",{d:"M3.3 12.7c.2.2.4.3.7.3s.5-.1.7-.3L8 9.4l3.3 3.3c.2.2.5.3.7.3s.5-.1.7-.3c.4-.4.4-1 0-1.4L9.4 8l3.3-3.3c.4-.4.4-1 0-1.4s-1-.4-1.4 0L8 6.6 4.7 3.3c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4L6.6 8l-3.3 3.3c-.4.4-.4 1 0 1.4z"}))),n&&r.createElement("div",{className:"is-good-example style-green"},r.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"0 0 18 18"},r.createElement("path",{d:"M5.056 15.04a1.5 1.5 0 002.217-.119l10.17-12.476A1.5 1.5 0 0015.118.55L6.007 11.758l-3.453-3.41a1.5 1.5 0 10-2.109 2.133l4.611 4.56"}))),r.createElement("iframe",(0,a.Z)({width:"100%",className:"docus-preview-box"+(d?" is-fullscreen":""),srcDoc:o},m)))}},8165:function(e,t,n){n.r(t),n.d(t,{frontMatter:function(){return p},contentTitle:function(){return s},metadata:function(){return m},toc:function(){return c},default:function(){return u}});var a=n(7462),i=n(3366),r=(n(7294),n(3905)),l=n(2695),o=["components"],p={title:"Animations",sidebar_position:1},s=void 0,m={unversionedId:"helpers/animation",id:"helpers/animation",isDocsHomePage:!1,title:"Animations",description:"FlatifyCSS comes with a couple of built-in CSS animations.",source:"@site/docs/helpers/animation.mdx",sourceDirName:"helpers",slug:"/helpers/animation",permalink:"/docs/helpers/animation",editUrl:"https://github.com/amir2mi/flatifycss/tree/master/website/docs/helpers/animation.mdx",tags:[],version:"current",sidebarPosition:1,frontMatter:{title:"Animations",sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"Toast",permalink:"/docs/mockups/toast"},next:{title:"Pulse",permalink:"/docs/helpers/pulse"}},c=[{value:"Animations",id:"animations",children:[{value:"Fade",id:"fade",children:[],level:3},{value:"Scale",id:"scale",children:[],level:3},{value:"Rotation",id:"rotation",children:[],level:3},{value:"Movement",id:"movement",children:[],level:3},{value:"Filter",id:"filter",children:[],level:3},{value:"Misc",id:"misc",children:[],level:3}],level:2},{value:"Helper classes",id:"helper-classes",children:[],level:2},{value:"Animation classes",id:"animation-classes",children:[],level:2}],d={toc:c};function u(e){var t=e.components,n=(0,i.Z)(e,o);return(0,r.kt)("wrapper",(0,a.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("p",null,"FlatifyCSS comes with a couple of built-in CSS animations.",(0,r.kt)("br",{parentName:"p"}),"\n","Generally, components use these animations to work as expected, however, you can use them as well!",(0,r.kt)("br",{parentName:"p"}),"\n","Before starting on, it is necessary to learn about CSS animations, ",(0,r.kt)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations"},"read more here"),"."),(0,r.kt)("h2",{id:"animations"},"Animations"),(0,r.kt)("p",null,"All available animations are listed below by their names, you can set them to the element that you wish like this:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-css",metastring:'title="style.css"',title:'"style.css"'},"animation: my-animation-name ease 1s infinite;\n")),(0,r.kt)("h3",{id:"fade"},"Fade"),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"flatify-fade-in"),(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},"flatify-fade-in-out"),(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},"flatify-backdrop-fade-in")," (Fade in - the final opacity is ",(0,r.kt)("inlineCode",{parentName:"p"},"--flatify__backdrop-opacity"),")",(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},"flatify-fade-out")),(0,r.kt)("h3",{id:"scale"},"Scale"),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"flatify-grow"),(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},"flatify-grow-x"),(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},"flatify-grow-y")),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"flatify-blow-in"),(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},"flatify-blow-out")),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"flatify-heart"),(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},"flatify-pulse")),(0,r.kt)("h3",{id:"rotation"},"Rotation"),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"flatify-spin")),(0,r.kt)("h3",{id:"movement"},"Movement"),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"flatify-slide-up-in"),(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},"flatify-slide-up-in-min"),(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},"flatify-slide-up-out")),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"flatify-slide-down-in"),(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},"flatify-slide-down-out"),(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},"flatify-slide-down-out-min")),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"flatify-slide-left-in"),(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},"flatify-slide-left-out"),(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},"flatify-slide-left-in-min"),(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},"flatify-slide-left-out-min")),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"flatify-slide-right-in"),(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},"flatify-slide-right-out"),(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},"flatify-slide-right-in-min"),(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},"flatify-slide-right-out-min")),(0,r.kt)("h3",{id:"filter"},"Filter"),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"flatify-hue"),(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},"flatify-hue-min")),(0,r.kt)("h3",{id:"misc"},"Misc"),(0,r.kt)("p",null,"These animations are just special to thier usecases:"),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"flatify-processing")," The animation for ",(0,r.kt)("a",{parentName:"p",href:"/docs/components/progress#processing"},"progress bar processing state"),"."),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"flatify-alert-will-be-removed")),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"flatify-dropdown-show"),(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},"flatify-dropdown-hide")),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"flatify-eye-blink")),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},"flatify-loading-dot-first"),(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},"flatify-loading-dot-second"),(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},"flatify-loading-dot-third")),(0,r.kt)("h2",{id:"helper-classes"},"Helper classes"),(0,r.kt)("p",null,"It is possible to change the animation state with helper classes, for example, play, pause, or stop."),(0,r.kt)("p",null,"These are helper classes that you can use:",(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},".no-transition")," Remove transition for an element.",(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},".no-animation")," Remove aniamtion for an element."),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},".play-animation")," Play current animation",(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},".pause-animation")," Pause current animation",(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},".stop-animation")," Stop the animation"),(0,r.kt)("h2",{id:"animation-classes"},"Animation classes"),(0,r.kt)("p",null,"Some predefined classes help you set animations directly:"),(0,r.kt)("p",null,(0,r.kt)("inlineCode",{parentName:"p"},".anim-hue")," (infinite)",(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},".anim-hue-min")," (infinite)",(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},".anim-spin")," (infinite)",(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},".anim-pulse")," (infinite)\n",(0,r.kt)("inlineCode",{parentName:"p"},".anim-heart")," (infinite)",(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},".anim-required")," Heart animation but repeats just two times.",(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},".anim-fade-in")," (one time)",(0,r.kt)("br",{parentName:"p"}),"\n",(0,r.kt)("inlineCode",{parentName:"p"},".anim-fade-out")," (one time)"),(0,r.kt)(l.Z,{height:"150px",children:'<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Animations</title> <style> .my-box{ width: 3em; height: 3em; margin: 0.5em; border: 0.25em solid; border-radius: 0.5em; animation-iteration-count: infinite !important; } @media (prefers-reduced-motion: reduce){ .my-box{ animation: none !important; } body:after{ content: "These animations are not available for reduced motion users."; text-align: center; width: 100%; opacity: 0.7; } } </style> </head> <body class="flex-center" style="flex-wrap: wrap"> <div class="my-box flex-center style-accent anim-spin"></div> <div class="my-box flex-center style-accent anim-heart"></div> <div class="my-box flex-center style-accent anim-required"></div> <div class="my-box flex-center style-accent anim-pulse"></div> <div class="my-box flex-center style-accent anim-fade-in"></div> <div class="my-box flex-center style-accent anim-fade-out"></div> <div class="my-box flex-center style-accent anim-hue"></div> <div class="my-box flex-center style-accent anim-hue-min"></div> </body>\n</html>',mdxType:"PreviewBox"}))}u.isMDXComponent=!0}}]);