This plugin works alongside TailwindCSS, which is a prerrequisite for the plugin to work, so make sure you have it installed and set up in your framework of choice before using the animations displayed below.
With npm:
npm install amazing-tailwind-animations tailwind.config.mjs file
import amazingAnimations from 'amazingAnimations'
export default {
// rest of your config
plugins: [amazingAnimations]
}
Once you have the plugin installed and added to your tailwind config file, you can use the animations by adding the classes to your HTML elements.
The classes are named after the animation they apply, and they are prefixed
with animate- to
make them easier to identify.
You can also use the hover:
and focus: prefixes
to apply the animations on hover and focus states.
Here are some examples of how to use the animations in your HTML:
<div
class="animate-bounce"> <!-- Your content here --> </div>
<button class="hover:animate-pulse"> <!-- Your content here --> </button>
<input type="text" class="focus:animate-wobble"> You can adjust your animations duration, fill mode, delay, steps, iteration count, range, and much more!
Click here to see how you can do it.
background-move
bounce-exit-above
bounce-exit-bottom
bounce-exit-left
bounce-exit-right
bounce-fade-in
bounce-from-above
bounce-from-bottom
bounce-from-left
bounce-from-right
double-bounce
horizontal-bounce
vertical-bounce
contract-horizontally
contract-vertically
expand-horizontally
expand-vertically
blurred-fade-in
fade-in
fade-in-down
fade-in-left
fade-in-right
fade-in-up
fade-out
fade-out-down
fade-out-left
fade-out-right
fade-out-up
pulse-fade-in
flip-horizontal
flip-in-x
flip-in-y
flip-out-x
flip-out-y
flip-vertical
flip-x
flip-y
leave-from-above
leave-from-bottom
leave-from-left
leave-from-right
blink
bouncing
dancing
flash
float
hang
heartbeat
hinge
horizontal-vibration
jiggle
jump
pop
pulse
pulsing
rotational-wave
rubber-band
scale
sink
skew
squeeze
sticky
surprise
sway
swing
swing-drop-in
tada
tilt
wobble
roll-in
roll-out
impulse-rotate-left
impulse-rotate-right
rotate-180
rotate-360
rotate-90
rotate-in
rotate-out
shake
show-from-above
show-from-bottom
show-from-left
show-from-right
slide-in-bottom
slide-in-left
slide-in-right
slide-in-top
slide-out-bottom
slide-out-left
slide-out-right
slide-out-top
slide-rotate-in
slide-rotate-out
slide-up-fade
speed-exit-left
speed-exit-right
speed-from-left
speed-from-right
spin-clockwise
spin-counter-clockwise
zoom-in
zoom-out