xxxxxxxxxx
// 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>
xxxxxxxxxx
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",
},
},
},
xxxxxxxxxx
<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>