Animation
Utilities for applying various animations to elements.
| Class Name | CSS Equivalent |
|---|---|
| animate-forwards | animation-fill-mode: forwards |
| animate-backwards | animation-fill-mode: backwards |
| animate-both | animation-fill-mode: both |
| animate-infinite | animation-iteration-count: infinite |
| animate-1 | animation-iteration-count: 1 |
| animate-2 | animation-iteration-count: 2 |
| animate-normal | animation-direction: normal |
| animate-reverse | animation-direction: reverse |
| animate-alternate | animation-direction: alternate |
| animate-alternate-reverse | animation-direction: alternate-reverse |
| animate-rotate-bottom-left | animation-name: rotate-bottom-left |
| animate-rotate-vertical-center | animation-name: rotate-vertical-center |
| animate-rotate-diagonal-bottom-right | animation-name: rotate-diagonal-bottom-right |
| animate-rotate-top | animation-name: rotate-top |
| animate-rotate-left | animation-name: rotate-left |
| animate-rotate-vertical-left | animation-name: rotate-vertical-left |
| animate-rotate-diagonal-bottom-left | animation-name: rotate-diagonal-bottom-left |
| animate-rotate-top-right | animation-name: rotate-top-right |
| animate-rotate-top-left | animation-name: rotate-top-left |
| animate-rotate-vertical-right | animation-name: rotate-vertical-right |
| animate-rotate-diagonal-top-left | animation-name: rotate-diagonal-top-left |
| animate-rotate-right | animation-name: rotate-right |
| animate-rotate-horizontal-center | animation-name: rotate-horizontal-center |
| animate-rotate-diagonal-1 | animation-name: rotate-diagonal-1 |
| animate-rotate-horizontal-top | animation-name: rotate-horizontal-top |
| animate-rotate-diagonal-top-right | animation-name: rotate-diagonal-top-right |
| animate-rotate-diagonal-2 | animation-name: rotate-diagonal-2 |
| animate-rotate-horizontal-bottom | animation-name: rotate-horizontal-bottom |
| animate-rotate-bottom | animation-name: rotate-bottom |
| animate-rotate-bottom-right | animation-name: rotate-bottom-right |
| animate-rotate-center | animation-name: rotate-center |
| animate-scale-down-center | animation-name: scale-down-center |
| animate-scale-down-bottom-left | animation-name: scale-down-bottom-left |
| animate-scale-down-vertical-center | animation-name: scale-down-vertical-center |
| animate-scale-down-top | animation-name: scale-down-top |
| animate-scale-down-left | animation-name: scale-down-left |
| animate-scale-down-vertical-top | animation-name: scale-down-vertical-top |
| animate-scale-down-top-right | animation-name: scale-down-top-right |
| animate-scale-down-top-left | animation-name: scale-down-top-left |
| animate-scale-down-vertical-bottom | animation-name: scale-down-vertical-bottom |
| animate-scale-down-right | animation-name: scale-down-right |
| animate-scale-down-horizontal-center | animation-name: scale-down-horizontal-center |
| animate-scale-down-bottom-right | animation-name: scale-down-bottom-right |
| animate-scale-down-horizontal-left | animation-name: scale-down-horizontal-left |
| animate-scale-down-bottom | animation-name: scale-down-bottom |
| animate-scale-down-horizontal-right | animation-name: scale-down-horizontal-right |
| animate-scale-up-center | animation-name: scale-up-center |
| animate-scale-up-bottom-left | animation-name: scale-up-bottom-left |
| animate-scale-up-vertical-center | animation-name: scale-up-vertical-center |
| animate-scale-up-top | animation-name: scale-up-top |
| animate-scale-up-left | animation-name: scale-up-left |
| animate-scale-up-vertical-top | animation-name: scale-up-vertical-top |
| animate-scale-up-top-right | animation-name: scale-up-top-right |
| animate-scale-up-top-left | animation-name: scale-up-top-left |
| animate-scale-up-vertical-bottom | animation-name: scale-up-vertical-bottom |
| animate-scale-up-right | animation-name: scale-up-right |
| animate-scale-up-horizontal-center | animation-name: scale-up-horizontal-center |
| animate-scale-up-bottom-right | animation-name: scale-up-bottom-right |
| animate-scale-up-horizontal-left | animation-name: scale-up-horizontal-left |
| animate-scale-up-bottom | animation-name: scale-up-bottom |
| animate-scale-up-horizontal-right | animation-name: scale-up-horizontal-right |
| animate-swing-top-fwd | animation-name: swing-top-fwd |
| animate-swing-bottom-right-fwd | animation-name: swing-bottom-right-fwd |
| animate-swing-top-right-fwd | animation-name: swing-top-right-fwd |
| animate-shake-horizontal | animation-name: shake-horizontal |
| animate-shake-bottom-right | animation-name: shake-bottom-right |
| animate-shake-vertical | animation-name: shake-vertical |
| animate-shake-bottom | animation-name: shake-bottom |
| animate-shake-left-right | animation-name: shake-left-right |
| animate-shake-bottom-left | animation-name: shake-bottom-left |
| animate-shake-top | animation-name: shake-top |
| animate-shake-left | animation-name: shake-left |
| animate-shake-top-right | animation-name: shake-top-right |
| animate-shake-top-left | animation-name: shake-top-left |
| animate-shake-right | animation-name: shake-right |
| animate-jello-horizontal | animation-name: jello-horizontal |
| animate-jello-vertical | animation-name: jello-vertical |
| animate-jello-diagonal-1 | animation-name: jello-diagonal-1 |
| animate-jello-diagonal-2 | animation-name: jello-diagonal-2 |
Applying Animation
Applying animation is as easy as adding the corresponding animation class to the element.
html
<div class="[...] animate-rotate-bottom-left">...</div>Animation Options
By defining extra options, you can fine-tune the animation. You can control duration, delay, easing, direction, iteration-count and fill-mode.
Animation Direction
Use animate-{direction} classes to apply direction to the animation.
html
<div class="[...] animate-alternate hover:animate-rotate-bottom-left">...</div>Animation Direction
Use animate-{direction} classes to apply direction to the animation.
html
<div class="[...] animate-alternate hover:animate-rotate-bottom-left">...</div>Animation Iteration Count
Use animate-{count} classes to apply an iteration count to the animation.
html
<div class="[...] animate-infinite hover:animate-rotate-bottom-left">...</div>
<div class="[...] animate-2 hover:animate-rotate-bottom-left">...</div>Animation Fill Mode
Use animate-{mode} classes to apply a fill mode to the animation.
html
<div class="[...] animate-backwards hover:animate-rotate-bottom-left">...</div>
<div class="[...] animate-forwards hover:animate-rotate-bottom-left">...</div>Animation Duration
Apply animation duration to elements by adding the corresponding duration utility class. You can apply exact the same classes as for transition durations.
INFO
See /Styles/Utilities/Transitions & Animations/Transition Duration for a full list of duration classes.
html
<div class="[...] animate-infinite duration-extra-long-5 hover:animate-rotate-bottom-left">...</div>Animation Easing
Apply animation easing to elements by adding the corresponding easing utility class.
INFO
See /Styles/Utilities/Transitions & Animations/Transition Ease for a full list of duration classes.
html
<div class="[...] animate-infinite ease-emphasized-decelarate hover:animate-rotate-bottom-left">...</div>Animation Delay
Apply animation delay to elements by adding the corresponding delay utility class. You can apply exact the same classes as for transition delays.
INFO
See /Styles/Utilities/Transitions & Animations/Transition Delay for a full list of delay classes.
html
<div class="[...] animate-infinite delay-extra-long-5 hover:animate-rotate-bottom-left">...</div>