Customize your animation properties
You can use the properties displayed below to customize your animations and control them through utility classes.
Animation Cubic Bezier
| Class | Properties |
|---|---|
| animate-cubic-bezier-sine-in | animation-cubic-bezier: cubic-bezier(0.12,0,0.39,0); |
| animate-cubic-bezier-sine-out | animation-cubic-bezier: cubic-bezier(0.39,0.575,0.565,1); |
| animate-cubic-bezier-sine-in-out | animation-cubic-bezier: cubic-bezier(0.445,0.05,0.55,0.95); |
| animate-cubic-bezier-quad-in | animation-cubic-bezier: cubic-bezier(0.55,0.085,0.68,0.53); |
| animate-cubic-bezier-quad-out | animation-cubic-bezier: cubic-bezier(0.25,0.46,0.45,0.94); |
| animate-cubic-bezier-quad-in-out | animation-cubic-bezier: cubic-bezier(0.455,0.03,0.515,0.955); |
| animate-cubic-bezier-cubic-in | animation-cubic-bezier: cubic-bezier(0.55,0.055,0.675,0.19); |
| animate-cubic-bezier-cubic-out | animation-cubic-bezier: cubic-bezier(0.215,0.61,0.355,1); |
| animate-cubic-bezier-cubic-in-out | animation-cubic-bezier: cubic-bezier(0.645,0.045,0.355,1); |
| animate-cubic-bezier-quart-in | animation-cubic-bezier: cubic-bezier(0.895,0.03,0.685,0.22); |
| animate-cubic-bezier-quart-out | animation-cubic-bezier: cubic-bezier(0.165,0.84,0.44,1); |
| animate-cubic-bezier-quart-in-out | animation-cubic-bezier: cubic-bezier(0.77,0,0.175,1); |
| animate-cubic-bezier-quint-in | animation-cubic-bezier: cubic-bezier(0.755,0.05,0.855,0.06); |
| animate-cubic-bezier-quint-out | animation-cubic-bezier: cubic-bezier(0.23,1,0.32,1); |
| animate-cubic-bezier-quint-in-out | animation-cubic-bezier: cubic-bezier(0.86,0,0.07,1); |
| animate-cubic-bezier-expo-in | animation-cubic-bezier: cubic-bezier(0.95,0.05,0.795,0.035); |
| animate-cubic-bezier-expo-out | animation-cubic-bezier: cubic-bezier(0.19,1,0.22,1); |
| animate-cubic-bezier-expo-in-out | animation-cubic-bezier: cubic-bezier(1,0,0,1); |
| animate-cubic-bezier-circ-in | animation-cubic-bezier: cubic-bezier(0.6,0.04,0.98,0.335); |
| animate-cubic-bezier-circ-out | animation-cubic-bezier: cubic-bezier(0.075,0.82,0.165,1); |
| animate-cubic-bezier-circ-in-out | animation-cubic-bezier: cubic-bezier(0.785,0.135,0.15,0.86); |
| animate-cubic-bezier-back-in | animation-cubic-bezier: cubic-bezier(0.6,-0.28,0.735,0.045); |
| animate-cubic-bezier-back-out | animation-cubic-bezier: cubic-bezier(0.175,0.885,0.32,1.275); |
| animate-cubic-bezier-back-in-out | animation-cubic-bezier: cubic-bezier(0.68,-0.55,0.265,1.55); |
Animation Delay
| Class | Properties |
|---|---|
| animate-delay-0 | animation-delay: 0ms; |
| animate-delay-100 | animation-delay: 100ms; |
| animate-delay-150 | animation-delay: 150ms; |
| animate-delay-200 | animation-delay: 200ms; |
| animate-delay-250 | animation-delay: 250ms; |
| 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-800 | animation-delay: 800ms; |
| animate-delay-900 | animation-delay: 900ms; |
| animate-delay-1000 | animation-delay: 1000ms; |
| animate-delay-none | animation-delay: 0ms; |
Animation Duration
| Class | Properties |
|---|---|
| animate-duration-0 | animation-duration: 0ms; |
| animate-duration-100 | animation-duration: 100ms; |
| animate-duration-150 | animation-duration: 150ms; |
| animate-duration-200 | animation-duration: 200ms; |
| animate-duration-250 | animation-duration: 250ms; |
| 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-800 | animation-duration: 800ms; |
| animate-duration-900 | animation-duration: 900ms; |
| animate-duration-1000 | animation-duration: 1000ms; |
| animate-duration-none | animation-duration: 0ms; |
| animate-duration-slower | animation-duration: 500ms; |
| animate-duration-slow | animation-duration: 400ms; |
| animate-duration-normal | animation-duration: 300ms; |
| animate-duration-fast | animation-duration: 200ms; |
| animate-duration-faster | animation-duration: 100ms; |
Animation Fill Mode
| Class | Properties |
|---|---|
| animate-fill-mode-none | animation-fill-mode: none; |
| animate-fill-mode-forwards | animation-fill-mode: forwards; |
| animate-fill-mode-backwards | animation-fill-mode: backwards; |
| animate-fill-mode-both | animation-fill-mode: both; |
Animation Iteration Count
| Class | Properties |
|---|---|
| animate-iteration-count-none | animation-iteration-count: 0; |
| animate-iteration-count-once | animation-iteration-count: 1; |
| animate-iteration-count-twice | animation-iteration-count: 2; |
| animate-iteration-count-thrice | animation-iteration-count: 3; |
| animate-iteration-count-infinite | animation-iteration-count: infinite; |
Animation Range
| Class | Properties |
|---|---|
| animate-range-normal | animation-range: normal; |
| animate-range-cover | animation-range: cover; |
| animate-range-contain | animation-range: contain; |
| animate-range-entry | animation-range: entry; |
| animate-range-exit | animation-range: exit; |
| animate-range-gradual | animation-range: 10% 90%; |
| animate-range-moderate | animation-range: 20% 80%; |
| animate-range-brisk | animation-range: 30% 70%; |
| animate-range-rapid | animation-range: 40% 60%; |
Animation Steps
| Class | Properties |
|---|---|
| animate-steps-none | animation-steps: 0; |
| animate-steps-retro | animation-steps: 8; |
| animate-steps-normal | animation-steps: 16; |
| animate-steps-modern | animation-steps: 24; |
Scroll Animation
| Class | Properties |
|---|---|
| scroll-animation-single | scroll-animation: --single-timeline; |
Scroll Timeline
| Class | Properties |
|---|---|
| scroll-timeline-single | scroll-timeline: --single-timeline; |
Scroll Timeline Axis
| Class | Properties |
|---|---|
| scroll-timeline-axis-block | scroll-timeline-axis: block; |
| scroll-timeline-axis-inline | scroll-timeline-axis: inline; |
| scroll-timeline-axis-x | scroll-timeline-axis: x; |
| scroll-timeline-axis-y | scroll-timeline-axis: y; |
Timeline
| Class | Properties |
|---|---|
| timeline-none | timeline: none; |
| timeline-auto | timeline: auto; |
| timeline-single | timeline: --single-timeline; |
| timeline-scroll | timeline: scroll(); |
| timeline-view | timeline: view(); |
View Animation
| Class | Properties |
|---|---|
| view-animation-single | view-animation: --single-timeline; |
View Timeline
| Class | Properties |
|---|---|
| view-timeline-single | view-timeline: --single-timeline; |
View Timeline Axis
| Class | Properties |
|---|---|
| view-timeline-axis-block | view-timeline-axis: block; |
| view-timeline-axis-inline | view-timeline-axis: inline; |
| view-timeline-axis-x | view-timeline-axis: x; |
| view-timeline-axis-y | view-timeline-axis: y; |
Arbitrary values
You can modify the properties of your animations using CSS accepted values for each animation type passing them through square brackets.
Examples
Here are some examples of what you can do with some of these properties.
<div class="animate-delay-[222ms]"> <!-- Your content here --> </div>
This will delay your animation by 222ms
<button class="hover:animate-duration-[777ms]"> <!-- Your content here --> </button>
This will make your animation last 777ms