LEARN
Tailwind CSS Animation
Tailwind CSS animation utilities enable you to add dynamic motion and interactivity to elements on your website or web application. Animation can enhance user experience, provide visual feedback, and make your site more engaging.
Add tailwind animation into your website with pagedone customizable
classes. You have to follow few steps to add classes in your 'tailwind.config.js' file where you define your
project's customized styles.
- Add below styles in 'tailwind.config.js' file in your project or if you are using tailwind CDN than, add below style into your 'tailwind.config' object inside script tag
- Use customized amimation classes shown below.
module.exports = {
theme: {
extend: {
keyframes: {
"fade-in": {
"0%": {
opacity: 0
},
"100%": {
opacity: 1
},
},
"fade-out": {
"0%": {
opacity: 1
},
"100%": {
opacity: 0
},
},
"fade-in-down": {
"0%": {
opacity: 0,
transform: "translate3d(0, -100%, 0)",
},
"100%": {
opacity: 1,
transform: "translate3d(0, 0, 0)",
},
},
"fade-in-top-left": {
"0%": {
opacity: 0,
transform: "translate3d(-100%, -100%, 0)",
},
"100%": {
opacity: 1,
transform: "translate3d(0, 0, 0)",
},
},
"fade-in-top-right": {
"0%": {
opacity: 0,
transform: "translate3d(100%, -100%, 0)",
},
"100%": {
opacity: 1,
transform: "translate3d(0, 0, 0)",
},
},
"fade-in-bottom-left": {
"0%": {
opacity: 0,
transform: "translate3d(100%, 100%, 0)",
},
"100%": {
opacity: 1,
transform: "translate3d(0, 0, 0)",
},
},
"fade-in-bottom-right": {
"0%": {
opacity: 0,
transform: "translate3d(-100%, 100%, 0)",
},
"100%": {
opacity: 1,
transform: "translate3d(0, 0, 0)",
},
},
"fade-in-bounce-right": {
"0%": {
opacity: 0,
transform: "translate3d(100%, 0%, 0)",
},
"33%": {
opacity: 0.5,
transform: "translate3d(0%, 0%, 0)",
},
"66%": {
opacity: 0.7,
transform: "translate3d(20%, 0%, 0)",
},
"100%": {
opacity: 1,
transform: "translate3d(0, 0, 0)",
},
},
"fade-in-bounce-left": {
"0%": {
opacity: 0,
transform: "translate3d(-100%, 0%, 0)",
},
"33%": {
opacity: 0.5,
transform: "translate3d(0%, 0%, 0)",
},
"66%": {
opacity: 0.7,
transform: "translate3d(-20%, 0%, 0)",
},
"100%": {
opacity: 1,
transform: "translate3d(0, 0, 0)",
},
},
"fade-in-bouncedown": {
"0%": {
opacity: 0,
transform: "translate3d(0%, -100%, 0)",
},
"33%": {
opacity: 0.5,
transform: "translate3d(0%, 0%, 0)",
},
"66%": {
opacity: 0.7,
transform: "translate3d(0%, -20%, 0)",
},
"100%": {
opacity: 1,
transform: "translate3d(0, 0, 0)",
},
},
"fade-in-bounceup": {
"0%": {
opacity: 0,
transform: "translate3d(0%, 100%, 0)",
},
"33%": {
opacity: 0.5,
transform: "translate3d(0%, 0%, 0)",
},
"66%": {
opacity: 0.7,
transform: "translate3d(0%, 20%, 0)",
},
"100%": {
opacity: 1,
transform: "translate3d(0, 0, 0)",
},
},
"fade-in-left": {
"0%": {
opacity: 0,
transform: "translate3d(-100%, 0, 0)",
},
"100%": {
opacity: 1,
transform: "translate3d(0, 0, 0)",
},
},
"fade-in-right": {
"0%": {
opacity: 0,
transform: "translate3d(100%, 0, 0)",
},
"100%": {
opacity: 1,
transform: "translate3d(0, 0, 0)",
},
},
"fade-in-up": {
"0%": {
opacity: 0,
transform: "translate3d(0, 100%, 0)",
},
"100%": {
opacity: 1,
transform: "translate3d(0, 0, 0)",
},
},
"fade-out-down": {
"0%": {
opacity: 1,
},
"100%": {
opacity: 0,
transform: "translate3d(0, 100%, 0)",
},
},
"fade-out-left": {
"0%": {
opacity: 1,
},
"100%": {
opacity: 0,
transform: "translate3d(-100%, 0, 0)",
},
},
"fade-out-top-left": {
"0%": {
opacity: 1,
},
"100%": {
opacity: 0,
transform: "translate3d(-100%, -100%, 0)",
},
},
"fade-out-top-right": {
"0%": {
opacity: 1,
},
"100%": {
opacity: 0,
transform: "translate3d( 100%, -100%, 0)",
},
},
"fade-out-right": {
"0%": {
opacity: 1,
},
"100%": {
opacity: 0,
transform: "translate3d(100%, 0, 0)",
},
},
"fade-out-up": {
"0%": {
opacity: 1,
},
"100%": {
opacity: 0,
transform: "translate3d(0, -100%, 0)",
},
},
"slide-in-down": {
"0%": {
visibility: "visible",
transform: "translate3d(0, -100%, 0)",
},
"100%": {
transform: "translate3d(0, 0, 0)",
},
},
"slide-in-left": {
"0%": {
visibility: "visible",
transform: "translate3d(-100%, 0, 0)",
},
"100%": {
transform: "translate3d(0, 0, 0)",
},
},
"slide-in-right": {
"0%": {
visibility: "visible",
transform: "translate3d(100%, 0, 0)",
},
"100%": {
transform: "translate3d(0, 0, 0)",
},
},
"slide-in-up": {
"0%": {
visibility: "visible",
transform: "translate3d(0, 100%, 0)",
},
"100%": {
transform: "translate3d(0, 0, 0)",
},
},
"slide-out-down": {
"0%": {
transform: "translate3d(0, 0, 0)",
},
"100%": {
visibility: "hidden",
transform: "translate3d(0, 100%, 0)",
},
},
"slide-out-left": {
"0%": {
transform: "translate3d(0, 0, 0)",
},
"100%": {
visibility: "hidden",
transform: "translate3d(-100%, 0, 0)",
},
},
"slide-out-right": {
"0%": {
transform: "translate3d(0, 0, 0)",
},
"100%": {
visibility: "hidden",
transform: "translate3d(100%, 0, 0)",
},
},
"slide-out-up": {
"0%": {
transform: "translate3d(0, 0, 0)",
},
"100%": {
visibility: "hidden",
transform: "translate3d(0, -100%, 0)",
},
},
"slide-down": {
"0%": {
transform: "translate3d(0, 0, 0)",
},
"100%": {
transform: "translate3d(0, 100%, 0)",
},
},
"slide-left": {
"0%": {
transform: "translate3d(0, 0, 0)",
},
"100%": {
transform: "translate3d(-100%, 0, 0)",
},
},
"slide-right": {
"0%": {
transform: "translate3d(0, 0, 0)",
},
"100%": {
transform: "translate3d(100%, 0, 0)",
},
},
"slide-up": {
"0%": {
transform: "translate3d(0, 0, 0)",
},
"100%": {
transform: "translate3d(0, -100%, 0)",
},
},
tada: {
"0%": {
transform: "scale3d(1, 1, 1)",
},
"10%, 20%": {
transform: "scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg)",
},
"30%, 50%, 70%, 90%": {
transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)",
},
"40%, 60%, 80%": {
transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)",
},
"100%": {
transform: "scale3d(1, 1, 1)",
},
},
"spinner-grow": {
"0%": {
transform: "scale(0)",
},
"100%": {
transform: "none",
opacity: "1",
},
},
"placeholder-wave": {
"100%": {
maskPosition: "-200% 0%"
},
},
"show-up-clock": {
"0%": {
opacity: "0",
transform: "scale(0.7)",
},
"100%": {
opacity: "1",
transform: "scale(1)",
},
},
"drop-in": {
"0%": {
opacity: "0",
transform: "scale(0)",
animationTimingFunction: "cubic-bezier(0.34, 1.61, 0.7, 1)",
},
"100%": {
opacity: "1",
transform: "scale(1)",
},
},
"drop-out": {
"0%": {
opacity: "1",
transform: "scale(1)",
animationTimingFunction: "cubic-bezier(0.34, 1.61, 0.7, 1)",
},
"100%": {
opacity: "0",
transform: "scale(0)"
},
},
"fly-in": {
"0%": {
opacity: "0",
transform: "scale3d(0.3, 0.3, 0.3)",
transitionTimingFunction: "cubic-bezier(0.215, 0.61, 0.355, 1)",
},
"20%": {
transform: "scale3d(1.1, 1.1, 1.1)"
},
"40%": {
transform: "scale3d(0.9, 0.9, 0.9)"
},
"60%": {
opacity: "1",
transform: "scale3d(1.03, 1.03, 1.03)"
},
"80%": {
transform: "scale3d(0.97, 0.97, 0.97)"
},
"100%": {
opacity: "1",
transform: "scale3d(1, 1, 1)"
},
},
"fly-in-up": {
"0%": {
opacity: "0",
transform: "translate3d(0, 1500px, 0)",
transitionTimingFunction: "cubic-bezier(0.215, 0.61, 0.355, 1)",
},
"60%": {
opacity: "1",
transform: "translate3d(0, -20px, 0)"
},
"75%": {
transform: "translate3d(0, 10px, 0)"
},
"90%": {
transform: "translate3d(0, -5px, 0)"
},
"100%": {
transform: "translate3d(0, 0, 0)"
},
},
"fly-in-down": {
"0%": {
opacity: "0",
transform: "translate3d(0, -1500px, 0)",
transitionTimingFunction: "cubic-bezier(0.215, 0.61, 0.355, 1)",
},
"60%": {
opacity: "1",
transform: "translate3d(0, 25px, 0)"
},
"75%": {
transform: "translate3d(0, -10px, 0)"
},
"90%": {
transform: "translate3d(0, 5px, 0)"
},
"100%": {
transform: "none"
},
},
"fly-in-left": {
"0%": {
opacity: "0",
transform: "translate3d(1500px, 0, 0)",
transitionTimingFunction: "cubic-bezier(0.215, 0.61, 0.355, 1)",
},
"60%": {
opacity: "1",
transform: "translate3d(-25px, 0, 0)"
},
"75%": {
transform: "translate3d(10px, 0, 0)"
},
"90%": {
transform: "translate3d(-5px, 0, 0)"
},
"100%": {
transform: "none"
},
},
"fly-in-right": {
"0%": {
opacity: "0",
transform: "translate3d(-1500px, 0, 0)",
transitionTimingFunction: "cubic-bezier(0.215, 0.61, 0.355, 1)",
},
"60%": {
opacity: "1",
transform: "translate3d(25px, 0, 0)"
},
"75%": {
transform: "translate3d(-10px, 0, 0)"
},
"90%": {
transform: "translate3d(5px, 0, 0)"
},
"100%": {
transform: "none"
},
},
"fly-out": {
"0%": {
transitionTimingFunction: "cubic-bezier(0.215, 0.61, 0.355, 1)",
},
"20%": {
transform: "scale3d(0.9, 0.9, 0.9)",
},
"50%, 55%": {
opacity: "1",
transform: "scale3d(1.1, 1.1, 1.1)",
},
"100%": {
opacity: "0",
transform: "scale3d(0.3, 0.3, 0.3)",
},
},
"fly-out-up": {
"0%": {
transitionTimingFunction: "cubic-bezier(0.215, 0.61, 0.355, 1)",
},
"20%": {
transform: "translate3d(0, 10px, 0)",
},
"40%, 45%": {
opacity: "1",
transform: "translate3d(0, -20px, 0)",
},
"100%": {
opacity: "0",
transform: "translate3d(0, 2000px, 0)",
},
},
"fly-out-down": {
"0%": {
transitionTimingFunction: "cubic-bezier(0.215, 0.61, 0.355, 1)",
},
"20%": {
transform: "translate3d(0, -10px, 0)",
},
"40%, 45%": {
opacity: "1",
transform: "translate3d(0, 20px, 0)",
},
"100%": {
opacity: "0",
transform: "translate3d(0, -2000px, 0)",
},
},
"fly-out-left": {
"0%": {
transitionTimingFunction: "cubic-bezier(0.215, 0.61, 0.355, 1)",
},
"20%": {
opacity: "1",
transform: "translate3d(-20px, 0, 0)",
},
"100%": {
opacity: "0",
transform: "translate3d(2000px, 0, 0)",
},
},
"fly-out-right": {
"0%": {
transitionTimingFunction: "cubic-bezier(0.215, 0.61, 0.355, 1)",
},
"20%": {
opacity: "1",
transform: "translate3d(20px, 0, 0)",
},
"100%": {
opacity: "0",
transform: "translate3d(-2000px, 0, 0)",
},
},
"browse-in": {
"0%": {
transform: "scale(0.8) translateZ(0px)",
zIndex: "-1"
},
"10%": {
transform: "scale(0.8) translateZ(0px)",
zIndex: "-1",
opacity: "0.7",
},
"80%": {
transform: "scale(1.05) translateZ(0px)",
zIndex: "999",
opacity: "1",
},
"100%": {
transform: "scale(1) translateZ(0px)",
zIndex: "999"
},
},
"browse-out": {
"0%": {
transform: "translateX(0%) rotateY(0deg) rotateX(0deg)",
zIndex: "999",
},
"50%": {
transform: "translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px)",
zIndex: "-1",
},
"80%": {
opacity: "1"
},
"100%": {
zIndex: "-1",
opacity: "0",
transform: "translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px)",
},
},
"browse-out-left": {
"0%": {
transform: "translateX(0%) rotateY(0deg) rotateX(0deg)",
zIndex: "999",
},
"50%": {
transform: "translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px)",
zIndex: "-1",
},
"80%": {
opacity: "1"
},
"100%": {
zIndex: "-1",
opacity: "0",
transform: "translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px)",
},
},
"browse-out-right": {
"0%": {
transform: "translateX(0%) rotateY(0deg) rotateX(0deg)",
zIndex: "999",
},
"50%": {
transform: "translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px)",
zIndex: "1",
},
"80%": {
opacity: "1"
},
"100%": {
zIndex: "1",
opacity: "0",
transform: "translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px)",
},
},
jiggle: {
"0%": {
transform: "scale3d(1, 1, 1)"
},
"30%": {
transform: "scale3d(1.25, 0.75, 1)"
},
"40%": {
transform: "scale3d(0.75, 1.25, 1)"
},
"50%": {
transform: "scale3d(1.15, 0.85, 1)"
},
"65%": {
transform: "scale3d(0.95, 1.05, 1)"
},
"75%": {
transform: "scale3d(1.05, 0.95, 1)"
},
"100%": {
transform: "scale3d(1, 1, 1)"
},
},
flash: {
"0%, 50%, 100%": {
opacity: "1"
},
"25%, 75%": {
opacity: "0"
},
},
shake: {
"0%, 100%": {
transform: "translateX(0)",
},
"10%, 30%, 50%, 70%, 90%": {
transform: "translateX(-10px)",
},
"20%, 40%, 60%, 80%": {
transform: "translateX(10px)",
},
},
glow: {
"0%": {
backgroundColor: "#fcfcfd"
},
"30%": {
backgroundColor: "#fff6cd"
},
"100%": {
backgroundColor: "#fcfcfd"
},
},
wiggle: {
"5%": {
transform: "rotate(-5deg)"
},
"20%": {
transform: "rotate(5deg)"
},
"40%": {
transform: "rotate(-5deg)"
},
"80%": {
transform: "rotate(5deg)"
}
},
flip: {
"0%" :{
transform: "rotateY(-180deg)"
},
"50%": {
transform: "rotateY(-90deg)"
},
"100%" :{
transform: "rotateY(0deg)"
},
},
"flip-up": {
"0%": {
transform: "translate3d(0, 100%, 0) rotateY(-180deg)",
},
"50%": {
transform: "rotateY(-90deg)",
},
"100%": {
transform: "translate3d(0, 0, 0) rotateY(0deg)",
},
},
"flip-down": {
"0%": {
transform: "translate3d(0, -100%, 0) rotateY(-180deg)",
},
"50%": {
transform: "rotateY(-90deg)",
},
"100%": {
transform: "translate3d(0, 0, 0) rotateY(0deg)",
},
},
"flip-left": {
"0%": {
transform: "translate3d(-100%, 0%, 0) rotateY(-180deg)",
},
"50%": {
transform: "rotateY(-90deg) ",
},
"100%": {
transform: "translate3d(0, 0, 0) rotateY(0deg)",
},
},
"flip-right": {
"0%": {
transform: "translate3d(100%, 0%, 0) rotateY(-180deg)",
},
"50%": {
transform: "rotateY(-90deg) ",
},
"100%": {
transform: "translate3d(0, 0, 0) rotateY(0deg)",
},
},
"flip-top-left": {
"0%": {
transform: "translate3d(-100%, -100%, 0) rotateY(-180deg)",
},
"50%": {
transform: "rotateY(-90deg) ",
},
"100%": {
transform: "translate3d(0, 0, 0) rotateY(0deg)",
},
},
"flip-top-right": {
"0%": {
transform: "translate3d(100%, -100%, 0) rotateY(-180deg)",
},
"50%": {
transform: "rotateY(-90deg) ",
},
"100%": {
transform: "translate3d(0, 0, 0) rotateY(0deg)",
},
},
"flip-bottom-left": {
"0%": {
transform: "translate3d(-100%, 100%, 0) rotateY(-180deg)",
},
"50%": {
transform: "rotateY(-90deg) ",
},
"100%": {
transform: "translate3d(0, 0, 0) rotateY(0deg)",
},
},
"flip-bottom-right": {
"0%": {
transform: "translate3d(100%, 100%, 0) rotateY(-180deg)",
},
"50%": {
transform: "rotateY(-90deg) ",
},
"100%": {
transform: "translate3d(0, 0, 0) rotateY(0deg)",
},
},
flipy: {
"0%" :{
transform: "rotateX(-180deg)"
},
"50%": {
transform: "rotateX(-90deg)",
},
"100%" :{
transform: "rotateX(0deg)"
},
},
"flipy-up": {
"0%": {
transform: "translate3d(0, 100%, 0) rotateX(-180deg)",
},
"50%": {
transform: "rotateX(-90deg)",
},
"100%": {
transform: "translate3d(0, 0, 0) rotateX(0deg)",
},
},
"flipy-down": {
"0%": {
transform: "translate3d(0, -100%, 0) rotateX(-180deg)",
},
"50%": {
transform: "rotateX(-90deg)",
},
"100%": {
transform: "translate3d(0, 0, 0) rotateX(0deg)",
},
},
"flipy-left": {
"0%": {
transform: "translate3d(-100%, 0%, 0) rotateX(-180deg)",
},
"50%": {
transform: "rotateX(-90deg) ",
},
"100%": {
transform: "translate3d(0, 0, 0) rotateX(0deg)",
},
},
"flipy-right": {
"0%": {
transform: "translate3d(100%, 0%, 0) rotateX(-180deg)",
},
"50%": {
transform: "rotateX(-90deg) ",
},
"100%": {
transform: "translate3d(0, 0, 0) rotateX(0deg)",
},
},
"flipy-top-left": {
"0%": {
transform: "translate3d(-100%, -100%, 0) rotateX(-180deg)",
},
"50%": {
transform: "rotateX(-90deg) ",
},
"100%": {
transform: "translate3d(0, 0, 0) rotateX(0deg)",
},
},
"flipy-top-right": {
"0%": {
transform: "translate3d(100%, -100%, 0) rotateX(-180deg)",
},
"50%": {
transform: "rotateX(-90deg) ",
},
"100%": {
transform: "translate3d(0, 0, 0) rotateX(0deg)",
},
},
"flipy-bottom-left": {
"0%": {
transform: "translate3d(-100%, 100%, 0) rotateX(-180deg)",
},
"50%": {
transform: "rotateX(-90deg) ",
},
"100%": {
transform: "translate3d(0, 0, 0) rotateX(0deg)",
},
},
"flipy-bottom-right": {
"0%": {
transform: "translate3d(100%, 100%, 0) rotateX(-180deg)",
},
"50%": {
transform: "rotateX(-90deg) ",
},
"100%": {
transform: "translate3d(0, 0, 0) rotateX(0deg)",
},
},
"zoom-in": {
"0%": {
opacity: 0,
transform: "scale3d(0.3, 0.3, 0.3)",
},
"80%": {
opacity: 0.8,
transform: "scale3d(1.1, 1.1, 1.1)",
},
"100%": {
opacity: 1,
},
},
"zoom-in-up": {
"0%": {
opacity: 0,
transform: "scale3d(0.3, 0.3, 0.3) translate3d(0, 100%, 0)",
},
"80%": {
opacity: 0.8,
transform: "scale3d(1.1, 1.1, 1.1)",
},
"100%": {
opacity: 1,
transform: "translate3d(0, 0%, 0)"
},
},
"zoom-in-down": {
"0%": {
opacity: 0,
transform: "scale3d(0.3, 0.3, 0.3) translate3d(0, -100%, 0)",
},
"80%": {
opacity: 0.8,
transform: "scale3d(1.1, 1.1, 1.1)",
},
"100%": {
opacity: 1,
transform: "translate3d(0, 0%, 0)"
},
},
"zoom-in-right": {
"0%": {
opacity: 0,
transform: "scale3d(0.3, 0.3, 0.3) translate3d(-100%, 0, 0)",
},
"80%": {
opacity: 0.8,
transform: "scale3d(1.1, 1.1, 1.1)",
},
"100%": {
opacity: 1,
transform: "translate3d(0, 0%, 0)"
},
},
"zoom-in-left": {
"0%": {
opacity: 0,
transform: "scale3d(0.3, 0.3, 0.3) translate3d(100%, 0, 0)",
},
"80%": {
opacity: 0.8,
transform: "scale3d(1.1, 1.1, 1.1)",
},
"100%": {
opacity: 1,
transform: "translate3d(0, 0%, 0)"
},
},
"zoom-in-bottom-right": {
"0%": {
opacity: 0,
transform: "scale3d(0.3, 0.3, 0.3) translate3d(100%, 100%, 0)",
},
"80%": {
opacity: 0.8,
transform: "scale3d(1.1, 1.1, 1.1)",
},
"100%": {
opacity: 1,
transform: "translate3d(0, 0%, 0)"
},
},
"zoom-in-top-right": {
"0%": {
opacity: 0,
transform: "scale3d(0.3, 0.3, 0.3) translate3d(100%, -100%, 0)",
},
"80%": {
opacity: 0.8,
transform: "scale3d(1.1, 1.1, 1.1)",
},
"100%": {
opacity: 1,
transform: "translate3d(0, 0%, 0)"
},
},
"zoom-in-top-left": {
"0%": {
opacity: 0,
transform: "scale3d(0.3, 0.3, 0.3) translate3d(-100%, -100%, 0)",
},
"80%": {
opacity: 0.8,
transform: "scale3d(1.1, 1.1, 1.1)",
},
"100%": {
opacity: 1,
transform: "translate3d(0, 0%, 0)"
},
},
"zoom-in-bottom-left": {
"0%": {
opacity: 0,
transform: "scale3d(0.3, 0.3, 0.3) translate3d(-100%, 100%, 0)",
},
"80%": {
opacity: 0.8,
transform: "scale3d(1.1, 1.1, 1.1)",
},
"100%": {
opacity: 1,
transform: "translate3d(0, 0%, 0)"
},
},
"zoom-out": {
"0%": {
opacity: 1,
},
"15%": {
opacity: 0.8,
transform: "scale3d(1.1, 1.1, 1.1)",
},
"100%": {
opacity: 0,
transform: "scale3d(0.3, 0.3, 0.3)",
},
},
"zoom-out-down": {
"0%": {
opacity: 1,
transform: "translate3d(0, 0%, 0)",
},
"15%": {
opacity: 0.8,
transform: "scale3d(1.1, 1.1, 1.1)",
},
"100%": {
opacity: 0,
transform: "scale3d(0.3, 0.3, 0.3) translate3d(0, 100%, 0)",
},
},
"zoom-out-up": {
"0%": {
opacity: 1,
transform: "translate3d(0, 0%, 0)",
},
"15%": {
opacity: 0.8,
transform: "scale3d(1.1, 1.1, 1.1)",
},
"100%": {
opacity: 0,
transform: "scale3d(0.3, 0.3, 0.3) translate3d(0, -100%, 0)",
},
},
"zoom-out-left": {
"0%": {
opacity: 1,
transform: "translate3d(0, 0%, 0)",
},
"15"": {
opacity: 0.8,
transform: "scale3d(1.1, 1.1, 1.1)",
},
"100%": {
opacity: 0,
transform: "scale3d(0.3, 0.3, 0.3) translate3d(-100%, 0%, 0)",
},
},
"zoom-out-right": {
"0%": {
opacity: 1,
transform: "translate3d(0, 0%, 0)",
},
"15%": {
opacity: 0.8,
transform: "scale3d(1.1, 1.1, 1.1)",
},
"100%": {
opacity: 0,
transform: "scale3d(0.3, 0.3, 0.3) translate3d(100%, 0%, 0)",
},
},
},
animation: {
fadein: 'fade-in 1s ease-in-out 0.25s 1',
fadeout: 'fade-out 1s ease-out 0.25s 1',
fadeindown: 'fade-in-down 1s ease-in 0.25s 1',
fadeintopleft: 'fade-in-top-left 1s ease-out 0.25s 1',
fadeintopright: 'fade-in-top-right 1s ease-out 0.25s 1',
fadeinbottomleft: 'fade-in-bottom-left 1s ease-out 0.25s 1',
fadeinbottomright: 'fade-in-bottom-right 1s ease-out 0.25s 1',
fadeinleft: 'fade-in-left 1s ease-in-out 0.25s 1',
fadeinbouncedown: 'fade-in-bouncedown 1s ease-in-out 0.25s 1',
fadeinbounceup: 'fade-in-bounceup 1s ease-in-out 0.25s 1',
fadeinbounceright: 'fade-in-bounce-right 1s ease-in-out 0.25s 1',
fadeinbounceleft: 'fade-in-bounce-left 1s ease-in-out 0.25s 1',
fadeinright: 'fade-in-right 1s ease-in-out 0.25s 1',
fadeinup: 'fade-in-up 1s ease-in-out 0.25s 1',
fadeoutdown: 'fade-out-down 1s ease-in-out 0.25s 1',
fadeouttopleft: 'fade-out-top-left 1s ease-in-out 0.25s 1',
fadeouttopright: 'fade-out-top-right 1s ease-in-out 0.25s 1',
fadeoutleft: 'fade-out-left 1s ease-in-out 0.25s 1',
fadeoutright: 'fade-out-right 1s ease-in-out 0.25s 1',
fadeoutup: 'fade-out-up 1s ease-in-out 0.25s 1',
slideindown: 'slide-in-down 1s ease-in-out 0.25s 1',
slideinleft: 'slide-in-left 1s ease-in-out 0.25s 1',
slideinright: 'slide-in-right 1s ease-in-out 0.25s 1',
slideinup: 'slide-in-up 1s ease-in-out 0.25s 1',
slideoutdown: 'slide-out-down 1s ease-in-out 0.25s 1',
slideoutleft: 'slide-out-left 1s ease-in-out 0.25s 1',
slideoutright: 'slide-out-right 1s ease-in-out 0.25s 1',
slideoutup: 'slide-out-up 1s ease-in-out 0.25s 1',
slidedown: 'slide-down 1s ease-in-out 0.25s 1',
slideleft: 'slide-left 1s ease-in-out 0.25s 1',
slideright: 'slide-right 1s ease-in-out 0.25s 1',
slideup: 'slide-up 1s ease-in-out 0.25s 1',
zoomin: 'zoom-in 1s ease-in-out 0.25s 1',
zoomout: 'zoom-out 1s ease-in-out 0.25s 1',
tada: 'tada 1s ease-in-out 0.25s 1',
spinnergrow: 'spinner-grow 1s ease-in-out 0.25s 1',
placeholderwave: 'placeholder-wave 1s ease-in-out 0.25s 1',
showupclock: 'show-up-clock 1s ease-in-out 0.25s 1',
dropin: 'drop-in 0.5s ease-in-out 0.25s 1',
dropout: 'drop-out 0.5s ease-in-out 0.25s 1',
flyin: 'fly-in 0.6s ease-in-out 0.25s 1',
flyinup: 'fly-in-up 0.6s ease-in-out 0.25s 1',
flyindown: 'fly-in-down 0.6s ease-in-out 0.25s 1',
flyinleft: 'fly-in-left 0.6s ease-in-out 0.25s 1',
flyinright: 'fly-in-right 0.6s ease-in-out 0.25s 1',
flyout: 'fly-out 0.6s ease-in-out 0.25s 1',
flyoutup: 'fly-out-up 0.6s ease-in-out 0.25s 1',
flyoutdown: 'fly-out-down 0.6s ease-in-out 0.25s 1',
flyoutleft: 'fly-out-left 0.6s ease-in-out 0.25s 1',
flyoutright: 'fly-out-right 0.6s ease-in-out 0.25s 1',
browsein: 'browse-in 0.4s ease-in-out 0.25s 1',
browseout: 'browse-out 0.4s ease-in-out 0.25s 1',
browseoutleft: 'browse-out-left 0.4s ease-in-out 0.25s 1',
browseoutright: 'browse-out-right 0.4s ease-in-out 0.25s 1',
jiggle: 'jiggle 0.6s ease-in-out 0.25s 1',
flash: 'flash 0.6s ease-in-out 0.25s 1',
shake: 'shake 0.6s ease-in-out 0.25s 1',
glow: 'glow 0.6s ease-in-out 0.25s 1',
zoomIn: 'zoom-in 1s ease-out 0.25s 1',
zoomOut: 'zoom-out 1s ease-out 0.25s 1',
zoomOutLeft: 'zoom-out-left 1s ease-out 0.25s 1',
zoomOutRight: 'zoom-out-right 1s ease-out 0.25s 1',
zoomOutUp: 'zoom-out-up 1s ease-out 0.25s 1',
zoomOutDown: 'zoom-out-down 1s ease-out 0.25s 1',
zoomInUp: 'zoom-in-up 1s ease-out 0.25s 1',
zoomInBotoomRight: 'zoom-in-bottom-right 1s ease-out 0.25s 1',
zoomInBotoomLeft: 'zoom-in-bottom-left 1s ease-out 0.25s 1',
zoomInTopRight: 'zoom-in-top-right 1s ease-out 0.25s 1',
zoomInTopLeft: 'zoom-in-top-left 1s ease-out 0.25s 1',
zoomInDown: 'zoom-in-down 1s ease-out 0.25s 1',
zoomInRight: 'zoom-in-right 1s ease-out 0.25s 1',
zoomInLeft: 'zoom-in-left 1s ease-out 0.25s 1',
flipx : 'flipx 2s 0.25s 1',
flipxRight: 'flipx-right 1s ease 0.25s 1',
flipxLeft: 'flipx-left 1s ease 0.25s 1',
flipxTopLeft: 'flipx-top-left 1s ease 0.25s 1',
flipxTopRight: 'flipx-top-right 1s ease 0.25s 1',
flipxBottomLeft: 'flipx-bottom-left 1s ease 0.25s 1',
flipxBottomRight: 'flipx-bottom-right 1s ease 0.25s 1',
flipxUp:'flipx-up 1s ease 0.25s 1',
flipxDown:'flipx-down 1s ease 0.25s 1',
flipRight: 'flip-right 1s ease 0.25s 1',
flipLeft: 'flip-left 1s ease 0.25s 1',
flipTopLeft: 'flip-top-left 1s ease 0.25s 1',
flipTopRight: 'flip-top-right 1s ease 0.25s 1',
flipBottomLeft: 'flip-bottom-left 1s ease 0.25s 1',
flipBottomRight: 'flip-bottom-right 1s ease 0.25s 1',
flipUp:'flip-up 1s ease 0.25s 1',
flipDown:'flip-down 1s ease 0.25s 1',
flip : 'flip 2s 0.25s 1',
wiggle: 'wiggle 0.8s ease 0.25s 2',
},
},
},
plugins: [],
}Custom Tailwind Animations
Below are list of all customized animations with their class names.
Tailwind Animation Examples
Use Below examples of animations in tailwind css to animate html elements.
fadeIn
fadeInDown
fadeInLeft
fadeInRight
fadeInUp
fadeOut
fadeOutDown
fadeOutLeft
fadeOutRight
fadeOutUp
ZoomIn
ZoomOut
Tada
SpinnerGrow
fadeIn
TopLeft
TopLeft
fadeIn
TopRight
TopRight
fadeIn
BottomLeft
BottomLeft
fadeIn
BottomRight
BottomRight
fadeIn
BounceDown
BounceDown
fadeIn
BounceUp
BounceUp
fadeIn
BounceRight
BounceRight
fadeIn
BounceLeft
BounceLeft
fadeOutLeft
fadeOut
TopLeft
TopLeft
fadeOut
TopRight
TopRight
dropIn
dropOut
flyIn
flyInUp
flyInDown
flyInLeft
flyInRight
flyOut
flyOutUp
flyOutDown
flyOutLeft
flyOutRight
browseIn
browseOut
browse
OutLeft
OutLeft
browse
OutRight
OutRight
jiggle
flash
Shake
Glow
wiggle
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-fadeIn">fadeIn</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-fadeInDown">fadeInDown</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-fadeInLeft">fadeInLeft</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-fadeInRight">fadeInRight</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-fadeInUp">fadeInUp</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-fadeOut">fadeOut</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-fadeOutDown">fadeOutDown</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-fadeOutLeft">fadeOutLeft</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-fadeOutRight">fadeOutRight</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-fadeOutUp">fadeOutUp</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-slideInDown">slideInDown</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-slideInLeft">slideInLeft</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-slideInRight">slideInRight</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-slideInUp">slideInUp</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-slideOutDown">slideOutDown</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-slideOutLeft">slideOutLeft</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-slideOutRight">slideOutRight</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-slideOutUp">slideOutUp</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-slideDown">slideDown</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-slideLeft">slideLeft</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-slideRight">slideRight</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-slideUp">slideUp</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-zoomIn">ZoomIn</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-zoomOut">ZoomOut</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-tada">Tada</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-spinnerGrow">SpinnerGrow</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center text-center hover:animate-fadeInTopLeft">fadeIn <br>TopLeft </div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center text-center hover:animate-fadeInTopRight">fadeIn <br>TopRight </div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center text-center hover:animate-fadeInBottomLeft">fadeIn <br>BottomLeft </div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center text-center hover:animate-fadeInBottomRight">fadeIn <br>BottomRight </div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center text-center hover:animate-fadeInBounceDown">fadeIn <br>BounceDown </div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center text-center hover:animate-fadeInBounceUp">fadeIn <br>BounceUp </div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center text-center hover:animate-fadeInBounceRight">fadeIn <br>BounceRight </div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center text-center hover:animate-fadeInBounceLeft">fadeIn <br>BounceLeft </div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-fadeOutLeft">fadeOutLeft</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center text-center hover:animate-fadeOutTopLeft">fadeOut <br>TopLeft </div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center text-center hover:animate-fadeOutTopRight">fadeOut <br>TopRight </div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-dropIn">dropIn</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-dropOut">dropOut</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flyIn">flyIn</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flyInUp">flyInUp</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flyInDown">flyInDown</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flyInLeft">flyInLeft</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flyInRight">flyInRight</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flyOut">flyOut</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flyOutUp">flyOutUp</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flyOutDown">flyOutDown</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flyOutLeft">flyOutLeft</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flyOutRight">flyOutRight</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-browseIn">browseIn</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-browseOut">browseOut</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center text-center hover:animate-browseOutLeft">browse <br>OutLeft </div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center text-center hover:animate-browseOutRight">browse <br>OutRight </div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-jiggle">jiggle</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flash">flash</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-shake">Shake</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-glow">Glow</div>Horizontal Flip Animation Examples
Use Below examples of animations in tailwind css to animate html elements.
flip
flipup
flipDown
flipLeft
flipRight
flip
TopLeft
TopLeft
flip
TopRight
TopRight
flip
BottomLeft
BottomLeft
flip
BottomRight
BottomRight
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flip">flip</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flipUp">flipUp</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flipDown">flipDown</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flipLeft">flipLeft</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flipRight">flipRight</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flipTopLeft">flipTopLeft</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flipTopRight">flipTopRight</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flipBottomLeft">flipBottomLeft</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flipBottomRight">flipBottomRight</div>
Vertical Flip Animation Examples
Use Below examples of animations in tailwind css to animate html elements.
flipy
flipyup
flipyDown
flipyLeft
flipyRight
flipy
TopLeft
TopLeft
flipy
TopRight
TopRight
flipy
BottomLeft
BottomLeft
flipy
BottomRight
BottomRight
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flipy">flipy</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flipyUp">flipyUp</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flipyDown">flipyDown</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flipyLeft">flipyLeft</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flipyRight">flipyRight</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flipyTopLeft">flipyTopLeft</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flipyTopRight">flipyTopRight</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flipyBottomLeft">flipyBottomLeft</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-flipyBottomRight">flipyBottomRight</div>
Zoom In/Out Animation Examples
Use Below examples of animations in tailwind css to animate html elements.
zoomin
zoomout
zoominup
zoomin
down
down
zoominleft
zoomin
right
right
zoomin
topleft
topleft
zoomin
topright
topright
zoomin
bottomleft
bottomleft
zoomin
bottomright
bottomright
zoomoutup
zoomout
down
down
zoomout
left
left
zoomout
right
right
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-zoomin">zoomin</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-zoomOut">zoomout</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-zoomInUp">zoomInUp</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-zoomInDown">zoomInDown</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-zoomInLeft">zoomInLeft</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-zoomInRight">zoomInRight</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-zoomInTopLeft">zoomInTopLeft</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-zoomInTopRight">zoomInTopRight</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-zoomInBottomLeft">zoomInBottomLeft</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-zoomInBottomRight">zoomInBottomRight</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-zoomOutUp">zoomOutUp</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-zoomOutDown">zoomOutDown</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-zoomOutLeft">zoomOutLeft</div>
<div class="bg-indigo-100 text-indigo-600 text-base w-40 h-36 font-medium flex items-center justify-center text-center hover:animate-zoomOutRight">zoomOutRight</div>