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.

Animation Name	Class Name
fadeIn	animate-fadeIn
fadeInDown	animate-fadeInDown
fadeInLeft	animate-fadeInLeft
fadeInRight	animate-fadeInRight
fadeInUp	animate-fadeInUp
fadeOut	animate-fadeOut
fadeOutDown	animate-fadeOutDown
fadeOutLeft	animate-fadeOutLeft
fadeOutRight	animate-fadeOutRight
fadeOutUp	animate-fadeOutUp
slideInDown	animate-slideInDown
slideInLeft	animate-slideInLeft
slideInRight	animate-slideInRight
slideInUp	animate-slideInUp
slideOutDown	animate-slideOutDown
slideOutLeft	animate-slideOutLeft
slideOutRight	animate-slideOutRight
slideOutUp	animate-slideOutUp
slideDown	animate-slideDown
slideLeft	animate-slideLeft
slideRight	animate-slideRight
slideUp	animate-slideUp
ZoomIn	animate-zoomIn
ZoomOut	animate-zoomOut
Tada	animate-tada
SpinnerGrow	animate-spinnerGrow
fadeInTopLeft	animate-fadeInTopLeft
fadeInTopRight	animate-fadeInTopRight
fadeInBottomLeft	animate-fadeInBottomLeft
fadeInBottomRight	animate-fadeInBottomRight
fadeInBounceDown	animate-fadeInBounceDown
fadeInBounceUp	animate-fadeInBounceUp
fadeInBounceRight	animate-fadeInBounceRight
fadeInBounceLeft	animate-fadeInBounceLeft
fadeOutLeft	animate-fadeOutLeft
fadeOutTopLeft	animate-fadeOutTopLeft
fadeOutTopRight	animate-fadeOutTopRight
dropIn	animate-dropIn
dropOut	animate-dropOut
flyIn	animate-flyIn
flyInUp	animate-flyInUp
flyInDown	animate-flyInDown
flyInLeft	animate-flyInLeft
flyInRight	animate-flyInRight
flyOut	animate-flyOut
flyOutUp	animate-flyOutUp
flyOutDown	animate-flyOutDown
flyOutLeft	animate-flyOutLeft
flyOutRight	animate-flyOutRight
browseIn	animate-browseInt
browseOut	animate-browseOut
browseOutLeft	animate-browseOutLeft
browseOutRight	animate-browseOutRight
jiggle	animate-jiggle
flash	animate-flash
Shake	animate-shake
Glow	animate-glow
wiggle	animate-wiggle
flip	animate-flip
flipy	animate-flipy
flipUp	animate-flipUp
flipDown	animate-flipDown
flipLeft	animate-flipLeft
flipTopLeft	animate-flipTopLeft
flipTopRight	animate-flipTopRight
flipBottomLeft	animate-flipBottomLeft
flipBottomRight	animate-flipBottomRight
flipyUp	animate-flipyUp
flipyDown	animate-flipyDown
flipyLeft	animate-flipyLeft
flipyRight	animate-flipyRight
flipyTopLeft	animate-flipyTopLeft
flipybottomLeft	animate-flipybottomLeft
flipyTopRight	animate-flipyTopRight
flipyBottomRight	animate-flipyBottomRight
zoomInUP	animate-zoomInUp
zoomInDown	animate-zoomInDown
zoomInRight	animate-zoomInRight
zoomInLeft	animate-zoomInLeft
zoomInBottomRight	animate-zoomInBottomRight
zoomInTopRight	animate-zoomInTopRight
zoomInTopLeft	animate-zoomInTopLeft
zoomInBottomLeft	animate-zoomInBottomLeft
zoomOutDown	animate-zoomOutDown
zoomOutUp	animate-zoomOutUp
zoomOutLeft	animate-zoomOutLeft
zoomOutRight	animate-zoomOutRight

1000+ Tailwind Blocks

Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.

Explore More

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

slideInDown

slideInLeft

slideInRight

slideInUp

slideOutDown

slideOutLeft

slideOutRight

slideOutUp

slideDown

slideLeft

slideRight

slideUp

ZoomIn

ZoomOut

Tada

SpinnerGrow

fadeIn
TopLeft

fadeIn
TopRight

fadeIn
BottomLeft

fadeIn
BottomRight

fadeIn
BounceDown

fadeIn
BounceUp

fadeIn
BounceRight

fadeIn
BounceLeft

fadeOutLeft

fadeOut
TopLeft

fadeOut
TopRight

dropIn

dropOut

flyIn

flyInUp

flyInDown

flyInLeft

flyInRight

flyOutUp

flyOutDown

flyOutLeft

flyOutRight

browseIn

browseOut

browse
OutLeft

browse
OutRight

jiggle

flash

Shake

Glow

wiggle

HTML

  <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

flip
TopRight

flip
BottomLeft

flip
BottomRight

HTML

<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>

1000+ Tailwind Blocks

Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.

Explore More

Vertical Flip Animation Examples

Use Below examples of animations in tailwind css to animate html elements.

flipy

flipyup

flipyDown

flipyLeft

flipyRight

flipy
TopLeft

flipy
TopRight

flipy
BottomLeft

flipy
BottomRight

HTML

<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

zoominleft

zoomin
right

zoomin
topleft

zoomin
topright

zoomin
bottomleft

zoomin
bottomright

zoomoutup

zoomout
down

zoomout
left

zoomout
right

HTML

<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>

Figma

You can also find this component in Figma. Check the Pagedone Figma Design System.

Preview Buy Now

1000+ Tailwind Blocks

Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.

Explore More

Tailwind CSS Animation

Custom Tailwind Animations

1000+ Tailwind Blocks

Tailwind Animation Examples

Horizontal Flip Animation Examples

1000+ Tailwind Blocks

Vertical Flip Animation Examples

Zoom In/Out Animation Examples

Figma

1000+ Tailwind Blocks

ON THIS PAGE