Breaking News: Grepper is joining You.com. Read the official announcement!

tailwind CSS custom animation

Add Answer

Readul Ahmed answered on October 24, 2022 Popularity 10/10 Helpfulness 2/10

answer tailwind CSS custom animation

related animation in tailwind

related tailwind animation

tailwind CSS custom animation

Comment

// tailwind.config

module.exports = {
  theme: {
    extend: {
      keyframes: {
        getDown: {
          '0%': { transform: 'translateY(-200px)' },
          '100%': { transform: 'translateY(0px)' },
        }
      },
      animation: {
        'menu-getDown': 'getDown 500ms',
      },
    }
  },

}


// jsx/html file 

<div className="animate-getDown"></div>

Popularity 10/10 Helpfulness 2/10 Language whatever

Source: Grepper

Tags: animation tailwind-css whatever

Link to this answer
Share Copy Link

Contributed on Feb 19 2024

Readul Ahmed

0 Answers Avg Quality 2/10

Closely Related Answers

animation in tailwind

Comment

add keyframse and animation in tailwind.config.js in theme and use them as
className = "aniamte-slidein" , "animate-(animation name)"

theme: {
    extend: {
      colors: {
        ...colors,
      },
      keyframes: {
        slide: {
          "0%": { transform: "translate(-100%)" },
          "100%": { transform: "translate(0px)" },
        },
        slideinRight: {
          "0%": { transform: "translate(100%)" },
          "100%": { transform: "translate(0px)" },
        },
        slideDown: {
          "0%": { transform: "translateY(-100%)" },
          "100%": { transform: "translateY(0)" },
        },
        slideUp: {
          "0%": { transform: "translateY(100%)" },
          "100%": { transform: "translateY(0)" },
        },
      },
      animation: {
        slidein: "slide 0.2s ease-out",
        slideOut: "slide 0.2s ease-in reverse",
        slideinRight: "slideinRight 0.2s ease-out",
        slideDown: "slideDown 0.2s ease-out",
        slideUp: "slideUp 0.2s ease-out",
      },
    },
  },

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: animation anim

Link to this answer
Share Copy Link

Contributed on Dec 22 2023

Sleepy Head

0 Answers Avg Quality 2/10

tailwind animation

Comment

<span class="flex h-3 w-3">
  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
  <span class="relative inline-flex rounded-full h-3 w-3 bg-sky-500"></span>
</span>

Popularity 10/10 Helpfulness 2/10 Language whatever

Source: tailwindcss.com

Tags: animation anim

Link to this answer
Share Copy Link

Contributed on Oct 24 2022

Olufemi oluwatobi

0 Answers Avg Quality 2/10

tailwind CSS custom animation

Contents

More Related Answers

tailwind CSS custom animation

Closely Related Answers

animation in tailwind

tailwind animation

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.