---
title: "Motion classes"
description: "Reveal animations, stagger, animation timing, easing and parallax classes in one table."
requested_language: ar
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/ar/next/reference/utilities/motion
version: unreleased (main)
docs_index: https://docs.systhema.app/ar/next/llms.txt
---
> This page isn't translated yet. Showing English.
| Class | Styles |
| --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `parallax` | `& { aspect-ratio: inherit; width: 100%; height: 100%; transform: translateY(-8.33%) scale(1.1666); object-fit: cover; }`
`@media (prefers-reduced-motion: reduce) { & { transform: none; } }` |
| `parallax-wrapper` | `pointer-events: none;`
`position: relative;`
`overflow: hidden;` |
| `animate-fadein` | `opacity: 0;`
`animation: fadeIn 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;` |
| `animate-fadeinzoomout` | `opacity: 0;`
`animation: fadeInZoomOut 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;` |
| `animate-fadeinup` | `opacity: 0;`
`animation: fadeInUp 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;` |
| `animate-fadeindown` | `opacity: 0;`
`animation: fadeInDown 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;` |
| `animate-fadeinleft` | `opacity: 0;`
`animation: fadeInLeft 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;` |
| `animate-fadeinright` | `opacity: 0;`
`animation: fadeInRight 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;` |
| `animate-fadeout` | `opacity: 0;`
`animation: fadeOut 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;` |
| `animates-once` | `animation-iteration-count: 1;` |
| `animate-disable` | `animation: none !important;` |
| `animates-on-scroll` | `&:not(.animated) { animation: none !important; }`
`&:not(.animated):not(.animate-disable) { opacity: 0 !important; animation: none !important; }`
`@media (prefers-reduced-motion: reduce) { & { opacity: 1 !important; animation: none !important; transform: none !important; } }`
`@media (prefers-reduced-motion: reduce) { &:not(.animated):not(.animate-disable) { opacity: 1 !important; animation: none !important; transform: none !important; } }` |
| `aos` | `&:not(.animated) { animation: none !important; }`
`&:not(.animated):not(.animate-disable) { opacity: 0 !important; animation: none !important; }`
`@media (prefers-reduced-motion: reduce) { & { opacity: 1 !important; animation: none !important; transform: none !important; } }`
`@media (prefers-reduced-motion: reduce) { &:not(.animated):not(.animate-disable) { opacity: 1 !important; animation: none !important; transform: none !important; } }` |
| `aos-disable-children` | `& .aos:is(.animated), .aos-disable-children .aos:not(:is(.animated)), .aos-disable-children .animates-on-scroll:is(.animated), .aos-disable-children .animates-on-scroll:not(:is(.animated)) { opacity: 1 !important; animation: none !important; }` |
| `animate-delay` | `animation-delay: 150ms;` |
| `animate-delay-0` | `animation-delay: 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-500` | `animation-delay: 500ms;` |
| `animate-delay-700` | `animation-delay: 700ms;` |
| `animate-delay-1000` | `animation-delay: 1000ms;` |
| `animate-duration` | `animation-duration: 150ms;` |
| `animate-duration-0` | `animation-duration: 0s;` |
| `animate-duration-75` | `animation-duration: 75ms;` |
| `animate-duration-100` | `animation-duration: 100ms;` |
| `animate-duration-150` | `animation-duration: 150ms;` |
| `animate-duration-200` | `animation-duration: 200ms;` |
| `animate-duration-300` | `animation-duration: 300ms;` |
| `animate-duration-500` | `animation-duration: 500ms;` |
| `animate-duration-700` | `animation-duration: 700ms;` |
| `animate-duration-1000` | `animation-duration: 1000ms;` |
| `animate-ease` | `animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);` |
| `animate-ease-in` | `animation-timing-function: cubic-bezier(0.4, 0, 1, 1);` |
| `animate-ease-in-back` | `animation-timing-function: cubic-bezier(0.36, 0, 0.66, -0.56);` |
| `animate-ease-in-circ` | `animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);` |
| `animate-ease-in-cubic` | `animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0);` |
| `animate-ease-in-expo` | `animation-timing-function: cubic-bezier(0.7, 0, 0.84, 0);` |
| `animate-ease-in-out` | `animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);` |
| `animate-ease-in-out-back` | `animation-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6);` |
| `animate-ease-in-out-circ` | `animation-timing-function: cubic-bezier(0.85, 0, 0.15, 1);` |
| `animate-ease-in-out-cubic` | `animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);` |
| `animate-ease-in-out-expo` | `animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1);` |
| `animate-ease-in-out-quad` | `animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);` |
| `animate-ease-in-out-quart` | `animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);` |
| `animate-ease-in-out-quint` | `animation-timing-function: cubic-bezier(0.83, 0, 0.17, 1);` |
| `animate-ease-in-out-sine` | `animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);` |
| `animate-ease-in-quad` | `animation-timing-function: cubic-bezier(0.11, 0, 0.5, 0);` |
| `animate-ease-in-quart` | `animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0);` |
| `animate-ease-in-quint` | `animation-timing-function: cubic-bezier(0.64, 0, 0.78, 0);` |
| `animate-ease-in-sine` | `animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0);` |
| `animate-ease-linear` | `animation-timing-function: linear;` |
| `animate-ease-out` | `animation-timing-function: cubic-bezier(0, 0, 0.2, 1);` |
| `animate-ease-out-back` | `animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);` |
| `animate-ease-out-circ` | `animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1);` |
| `animate-ease-out-cubic` | `animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);` |
| `animate-ease-out-expo` | `animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);` |
| `animate-ease-out-quad` | `animation-timing-function: cubic-bezier(0.5, 1, 0.89, 1);` |
| `animate-ease-out-quart` | `animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);` |
| `animate-ease-out-quint` | `animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);` |
| `animate-ease-out-sine` | `animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);` |
| `ease-in-back` | `--tw-ease: cubic-bezier(0.36, 0, 0.66, -0.56);`
`transition-timing-function: cubic-bezier(0.36, 0, 0.66, -0.56);` |
| `ease-in-circ` | `--tw-ease: cubic-bezier(0.55, 0, 1, 0.45);`
`transition-timing-function: cubic-bezier(0.55, 0, 1, 0.45);` |
| `ease-in-cubic` | `--tw-ease: cubic-bezier(0.32, 0, 0.67, 0);`
`transition-timing-function: cubic-bezier(0.32, 0, 0.67, 0);` |
| `ease-in-expo` | `--tw-ease: cubic-bezier(0.7, 0, 0.84, 0);`
`transition-timing-function: cubic-bezier(0.7, 0, 0.84, 0);` |
| `ease-in-out-back` | `--tw-ease: cubic-bezier(0.68, -0.6, 0.32, 1.6);`
`transition-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6);` |
| `ease-in-out-circ` | `--tw-ease: cubic-bezier(0.85, 0, 0.15, 1);`
`transition-timing-function: cubic-bezier(0.85, 0, 0.15, 1);` |
| `ease-in-out-cubic` | `--tw-ease: cubic-bezier(0.65, 0, 0.35, 1);`
`transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);` |
| `ease-in-out-expo` | `--tw-ease: cubic-bezier(0.87, 0, 0.13, 1);`
`transition-timing-function: cubic-bezier(0.87, 0, 0.13, 1);` |
| `ease-in-out-quad` | `--tw-ease: cubic-bezier(0.45, 0, 0.55, 1);`
`transition-timing-function: cubic-bezier(0.45, 0, 0.55, 1);` |
| `ease-in-out-quart` | `--tw-ease: cubic-bezier(0.76, 0, 0.24, 1);`
`transition-timing-function: cubic-bezier(0.76, 0, 0.24, 1);` |
| `ease-in-out-quint` | `--tw-ease: cubic-bezier(0.83, 0, 0.17, 1);`
`transition-timing-function: cubic-bezier(0.83, 0, 0.17, 1);` |
| `ease-in-out-sine` | `--tw-ease: cubic-bezier(0.37, 0, 0.63, 1);`
`transition-timing-function: cubic-bezier(0.37, 0, 0.63, 1);` |
| `ease-in-quad` | `--tw-ease: cubic-bezier(0.11, 0, 0.5, 0);`
`transition-timing-function: cubic-bezier(0.11, 0, 0.5, 0);` |
| `ease-in-quart` | `--tw-ease: cubic-bezier(0.5, 0, 0.75, 0);`
`transition-timing-function: cubic-bezier(0.5, 0, 0.75, 0);` |
| `ease-in-quint` | `--tw-ease: cubic-bezier(0.64, 0, 0.78, 0);`
`transition-timing-function: cubic-bezier(0.64, 0, 0.78, 0);` |
| `ease-in-sine` | `--tw-ease: cubic-bezier(0.12, 0, 0.39, 0);`
`transition-timing-function: cubic-bezier(0.12, 0, 0.39, 0);` |
| `ease-out-back` | `--tw-ease: cubic-bezier(0.34, 1.56, 0.64, 1);`
`transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);` |
| `ease-out-circ` | `--tw-ease: cubic-bezier(0, 0.55, 0.45, 1);`
`transition-timing-function: cubic-bezier(0, 0.55, 0.45, 1);` |
| `ease-out-cubic` | `--tw-ease: cubic-bezier(0.33, 1, 0.68, 1);`
`transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1);` |
| `ease-out-expo` | `--tw-ease: cubic-bezier(0.16, 1, 0.3, 1);`
`transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);` |
| `ease-out-quad` | `--tw-ease: cubic-bezier(0.5, 1, 0.89, 1);`
`transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);` |
| `ease-out-quart` | `--tw-ease: cubic-bezier(0.25, 1, 0.5, 1);`
`transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);` |
| `ease-out-quint` | `--tw-ease: cubic-bezier(0.22, 1, 0.36, 1);`
`transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);` |
| `ease-out-sine` | `--tw-ease: cubic-bezier(0.61, 1, 0.88, 1);`
`transition-timing-function: cubic-bezier(0.61, 1, 0.88, 1);` |
| `stagger` | `&:nth-child(1n) { animation-delay: 0ms; }`
`&:nth-child(1n - 0) { animation-delay: 0ms; }` |
| `stagger-1` | `&:nth-child(1n) { animation-delay: 0ms; }`
`&:nth-child(1n - 0) { animation-delay: 0ms; }` |
| `stagger-2` | `&:nth-child(2n) { animation-delay: calc(var(--tw-stagger-delay, 300ms) * 1); }`
`&:nth-child(2n - 1) { animation-delay: 0ms; }` |
| `stagger-3` | `&:nth-child(3n) { animation-delay: calc(var(--tw-stagger-delay, 300ms) * 2); }`
`&:nth-child(3n - 1) { animation-delay: calc(var(--tw-stagger-delay, 300ms) * 1); }`
`&:nth-child(3n - 2) { animation-delay: 0ms; }` |
| `stagger-4` | `&:nth-child(4n) { animation-delay: calc(var(--tw-stagger-delay, 300ms) * 3); }`
`&:nth-child(4n - 1) { animation-delay: calc(var(--tw-stagger-delay, 300ms) * 2); }`
`&:nth-child(4n - 2) { animation-delay: calc(var(--tw-stagger-delay, 300ms) * 1); }`
`&:nth-child(4n - 3) { animation-delay: 0ms; }` |
| `stagger-5` | `&:nth-child(5n) { animation-delay: calc(var(--tw-stagger-delay, 300ms) * 4); }`
`&:nth-child(5n - 1) { animation-delay: calc(var(--tw-stagger-delay, 300ms) * 3); }`
`&:nth-child(5n - 2) { animation-delay: calc(var(--tw-stagger-delay, 300ms) * 2); }`
`&:nth-child(5n - 3) { animation-delay: calc(var(--tw-stagger-delay, 300ms) * 1); }`
`&:nth-child(5n - 4) { animation-delay: 0ms; }` |
| `stagger-6` | `&:nth-child(6n) { animation-delay: calc(var(--tw-stagger-delay, 300ms) * 5); }`
`&:nth-child(6n - 1) { animation-delay: calc(var(--tw-stagger-delay, 300ms) * 4); }`
`&:nth-child(6n - 2) { animation-delay: calc(var(--tw-stagger-delay, 300ms) * 3); }`
`&:nth-child(6n - 3) { animation-delay: calc(var(--tw-stagger-delay, 300ms) * 2); }`
`&:nth-child(6n - 4) { animation-delay: calc(var(--tw-stagger-delay, 300ms) * 1); }`
`&:nth-child(6n - 5) { animation-delay: 0ms; }` |
| `stagger-7` | `&:nth-child(7n) { animation-delay: calc(var(--tw-stagger-delay, 300ms) * 6); }`
`&:nth-child(7n - 1) { animation-delay: calc(var(--tw-stagger-delay, 300ms) * 5); }`
`&:nth-child(7n - 2) { animation-delay: calc(var(--tw-stagger-delay, 300ms) * 4); }`
`&:nth-child(7n - 3) { animation-delay: calc(var(--tw-stagger-delay, 300ms) * 3); }`
`&:nth-child(7n - 4) { animation-delay: calc(var(--tw-stagger-delay, 300ms) * 2); }`
+ 2 more rules |
| `stagger-8` | `&:nth-child(8n) { animation-delay: calc(var(--tw-stagger-delay, 300ms) * 7); }`
`&:nth-child(8n - 1) { animation-delay: calc(var(--tw-stagger-delay, 300ms) * 6); }`
`&:nth-child(8n - 2) { animation-delay: calc(var(--tw-stagger-delay, 300ms) * 5); }`
`&:nth-child(8n - 3) { animation-delay: calc(var(--tw-stagger-delay, 300ms) * 4); }`
`&:nth-child(8n - 4) { animation-delay: calc(var(--tw-stagger-delay, 300ms) * 3); }`
+ 3 more rules |
| `stagger-9` | `&:nth-child(9n) { animation-delay: calc(var(--tw-stagger-delay, 300ms) * 8); }`
`&:nth-child(9n - 1) { animation-delay: calc(var(--tw-stagger-delay, 300ms) * 7); }`
`&:nth-child(9n - 2) { animation-delay: calc(var(--tw-stagger-delay, 300ms) * 6); }`
`&:nth-child(9n - 3) { animation-delay: calc(var(--tw-stagger-delay, 300ms) * 5); }`
`&:nth-child(9n - 4) { animation-delay: calc(var(--tw-stagger-delay, 300ms) * 4); }`
+ 4 more rules |
| `stagger-10` | `&:nth-child(10n) { animation-delay: calc(var(--tw-stagger-delay, 300ms) * 9); }`
`&:nth-child(10n - 1) { animation-delay: calc(var(--tw-stagger-delay, 300ms) * 8); }`
`&:nth-child(10n - 2) { animation-delay: calc(var(--tw-stagger-delay, 300ms) * 7); }`
`&:nth-child(10n - 3) { animation-delay: calc(var(--tw-stagger-delay, 300ms) * 6); }`
`&:nth-child(10n - 4) { animation-delay: calc(var(--tw-stagger-delay, 300ms) * 5); }`
+ 5 more rules |
| `stagger-delay` | `--tw-stagger-delay: 150ms;` |
| `stagger-delay-0` | `--tw-stagger-delay: 0s;` |
| `stagger-delay-75` | `--tw-stagger-delay: 75ms;` |
| `stagger-delay-100` | `--tw-stagger-delay: 100ms;` |
| `stagger-delay-150` | `--tw-stagger-delay: 150ms;` |
| `stagger-delay-200` | `--tw-stagger-delay: 200ms;` |
| `stagger-delay-300` | `--tw-stagger-delay: 300ms;` |
| `stagger-delay-500` | `--tw-stagger-delay: 500ms;` |
| `stagger-delay-700` | `--tw-stagger-delay: 700ms;` |
| `stagger-delay-1000` | `--tw-stagger-delay: 1000ms;` |