The plugin also adds extended animation utilities that can be used with the
In addition to the prebuilt animations, you may also build your own declaratively using the animate-enter and animate-leave along with the opacity, rotate, scale and translate parameters. These animations work perfectly with
the
| Class | Property |
|---|---|
| animate-enter | animation-name: enter; --p-enter-opacity: initial; --p-enter-scale: initial; --p-enter-rotate: initial; --p-enter-translate-x: initial; --p-enter-translate-y: initial; |
| animate-leave | animation-name: leave; --p-leave-opacity: initial; --p-leave-scale: initial; --p-leave-rotate: initial; --p-leave-translate-x: initial; --p-leave-translate-y: initial; |
| animate-leave | fadein 0.15s linear |
| animate-fadein | fadein 0.15s linear |
| animate-fadeout | fadeout 0.15s linear |
| animate-slidedown | slidedown 0.45s ease-in-out |
| animate-slideup | slideup 0.45s cubic-bezier(0, 1, 0, 1) |
| animate-scalein | scalein 0.15s linear |
| animate-fadeinleft | fadeinleft 0.15s linear |
| animate-fadeoutleft | fadeoutleft 0.15s linear |
| animate-fadeinright | fadeinright 0.15s linear |
| animate-fadeoutright | fadeoutright 0.15s linear |
| animate-fadeinup | fadeinup 0.15s linear |
| animate-fadeoutup | fadeoutup 0.15s linear |
| animate-fadeindown | fadeindown 0.15s linear |
| animate-fadeoutup | fadeoutup 0.15s linear |
| animate-width | width 0.15s linear |
| animate-flip | flip 0.15s linear |
| animate-flipup | flipup 0.15s linear |
| animate-flipleft | fadein 0.15s linear |
| animate-flipright | flipright 0.15s linear |
| animate-zoomin | zoomin 0.15s linear |
| animate-zoomindown | zoomindown 0.15s linear |
| animate-zoominleft | zoominleft 0.15s linear |
| animate-zoominright | zoominright 0.15s linear |
| animate-zoominup | zoominup 0.15s linear |
| Class | Property |
|---|---|
| animate-duration-0 | animation-duration: 0s |
| animate-duration-75 | animation-duration: 75ms |
| animate-duration-100 | animation-duration: 100ms |
| animate-duration-200 | animation-duration: 200ms |
| animate-duration-300 | animation-duration: 300ms |
| animate-duration-400 | animation-duration: 400ms |
| animate-duration-500 | animation-duration: 500ms |
| animate-duration-700 | animation-duration: 700ms |
| animate-duration-1000 | animation-duration: 1000ms |
| animate-duration-2000 | animation-duration: 2000ms |
| animate-duration-3000 | animation-duration: 300ms |
| animate-duration-[value] | animation-duration: value |
| Class | Property |
|---|---|
| animate-delay-none | animation-duration: 0s |
| animate-delay-75 | animation-delay: 75ms |
| animate-delay-100 | animation-delay: 100ms |
| animate-delay-150 | animation-delay: 150ms |
| animate-delay-200 | animation-delay: 200ms |
| animate-delay-300 | animation-delay: 300ms |
| animate-delay-400 | animation-delay: 400ms |
| animate-delay-500 | animation-delay: 500ms |
| animate-delay-700 | animation-delay: 700ms |
| animate-delay-1000 | animation-delay: 1000ms |
| Class | Property |
|---|---|
| animate-infinite | animation-iteration-count: infinite |
| animate-once | animation-iteration-count: 1 |
| animate-twice | animation-iteration-count: 2 |
| Class | Property |
|---|---|
| animate-normal | animation-direction: normal |
| animate-reverse | animation-direction: reverse |
| animate-alternate | animation-direction: alternate |
| animate-alternate-reverse | animation-direction: alternate-reverse |
| Class | Property |
|---|---|
| animate-ease-linear | animation-timing-function: linear |
| animate-ease-in | animation-timing-function: cubic-bezier(0.4, 0, 1, 1) |
| animate-ease-out | animation-timing-function: cubic-bezier(0, 0, 0.2, 1) |
| animate-ease-in-out | animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1) |
| Class | Property |
|---|---|
| animate-fill-none | animation-fill-mode: normal |
| animate-fill-forwards | animation-fill-mode: forwards |
| animate-fill-backwards | animation-fill-mode: backwards |
| animate-fill-both | animation-fill-mode: both |
| Class | Property |
|---|---|
| animate-running | animation-play-state: running |
| animate-paused | animation-play-state: paused |
| Class | Property |
|---|---|
| backface-visible | backface-visibility: visible |
| backface-hidden | backface-visibility: hidden |
Values are derived from the Tailwind CSS opacity e.g. fade-in-50 and fade-out-20. Arbitrary values such as fade-in-[15] are also supported.
| Class | Property |
|---|---|
| fade-in-{value} | --p-enter-opacity: {value} |
| fade-out-{value} | --p-leave-opacity: {value} |
Values are derived from the Tailwind CSS scale e.g. zoom-in-50 and zoom-out-75. Arbitrary values such as zoom-in-[0.8] are also supported.
| Class | Property |
|---|---|
| zoom-in-{value} | --p-enter-scale: {value} |
| zoom-out-{value} | --p-leave-scale: {value} |
Values are derived from the Tailwind CSS rotate e.g. spin-in-45 and spin-out-90. Arbitrary values such as spin-in-[60deg] are also supported.
| Class | Property |
|---|---|
| spin-in-{value} | --p-enter-rotate: {value} |
| spin-out-{value} | --p-leave-rotate: {value} |
Values are derived from the Tailwind CSS translate e.g. slide-in-from-t-50 and slide-out-to-l-8. Arbitrary values such as slide-in-from-b-[8px] are also supported.
| Class | Property |
|---|---|
| slide-in-from-t-{value} | --p-enter-translate-y: -{value} |
| slide-in-from-b-{value} | --p-enter-translate-y: {value} |
| slide-in-from-l-{value} | --p-enter-translate-x: -{value} |
| slide-in-from-r-{value} | --p-enter-translate-x: {value} |
| slide-out-to-t-{value} | --p-leave-translate-y: -{value} |
| slide-out-to-b-{value} | --p-leave-translate-y: {value} |
| slide-out-to-l-{value} | --p-leave-translate-x: -{value} |
| slide-out-to-r-{value} | --p-leave-translate-x: {value} |