# Utilities: animation Source: `src/utilities/animation.css` | Class | CSS output | | --- | --- | | `.velin-animate--delay-100` | `animation-delay: 100ms;` | | `.velin-animate--delay-1000` | `animation-delay: 1000ms;` | | `.velin-animate--delay-200` | `animation-delay: 200ms;` | | `.velin-animate--delay-300` | `animation-delay: 300ms;` | | `.velin-animate--delay-500` | `animation-delay: 500ms;` | | `.velin-animate--fast` | `animation-duration: var(--velin-duration-fast) !important;` | | `.velin-animate--infinite` | `animation-iteration-count: infinite;` | | `.velin-animate--once` | `animation-iteration-count: 1;` | | `.velin-animate--slow` | `animation-duration: var(--velin-duration-slow) !important;` | | `.velin-animate--slower` | `animation-duration: var(--velin-duration-slower) !important;` | | `.velin-animate-blur-in` | `animation: velin-blur-in var(--velin-duration-normal) var(--velin-ease-out) both;` | | `.velin-animate-blur-out` | `animation: velin-blur-out var(--velin-duration-normal) var(--velin-ease-in) both;` | | `.velin-animate-bounce` | `animation: velin-bounce 1s var(--velin-ease-bounce) infinite;` | | `.velin-animate-drop-in` | `animation: velin-drop-in var(--velin-duration-normal) var(--velin-ease-bounce) both;` | | `.velin-animate-fade-in` | `animation: velin-fade-in var(--velin-duration-normal) var(--velin-ease-out) both;` | | `.velin-animate-fade-out` | `animation: velin-fade-out var(--velin-duration-normal) var(--velin-ease-in) both;` | | `.velin-animate-flash` | `animation: velin-flash 0.6s var(--velin-ease-default) both;` | | `.velin-animate-flash` | `animation: none;` | | `.velin-animate-flip` | `animation: velin-flip var(--velin-duration-normal) var(--velin-ease-out) both;` | | `.velin-animate-float` | `animation: velin-float 3s var(--velin-ease-in-out) infinite;` | | `.velin-animate-glow` | `animation: velin-glow 2s var(--velin-ease-in-out) infinite;` | | `.velin-animate-heartbeat` | `animation: velin-heartbeat 1.5s var(--velin-ease-in-out) infinite;` | | `.velin-animate-hover` | `animation-play-state: paused;` | | `.velin-animate-hover:hover` | `animation-play-state: running;` | | `.velin-animate-jello` | `animation: velin-jello 1s var(--velin-ease-default) both;` | | `.velin-animate-ping` | `animation: velin-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;` | | `.velin-animate-pulse` | `animation: velin-pulse 2s var(--velin-ease-in-out) infinite;` | | `.velin-animate-reveal-down` | `animation: velin-reveal-down var(--velin-duration-normal) var(--velin-ease-out) both;` | | `.velin-animate-reveal-up` | `animation: velin-reveal-up var(--velin-duration-normal) var(--velin-ease-out) both;` | | `.velin-animate-rotate-in` | `animation: velin-rotate-in var(--velin-duration-normal) var(--velin-ease-out) both;` | | `.velin-animate-rubber-band` | `animation: velin-rubber-band 1s var(--velin-ease-default) both;` | | `.velin-animate-scale-in` | `animation: velin-scale-in var(--velin-duration-normal) var(--velin-ease-out) both;` | | `.velin-animate-scale-out` | `animation: velin-scale-out var(--velin-duration-normal) var(--velin-ease-in) both;` | | `.velin-animate-shake` | `animation: velin-shake 0.5s var(--velin-ease-default) both;` | | `.velin-animate-slide-down` | `animation: velin-slide-down var(--velin-duration-normal) var(--velin-ease-out) both;` | | `.velin-animate-slide-fade-left` | `animation: velin-slide-fade-left var(--velin-duration-normal) var(--velin-ease-out) both;` | | `.velin-animate-slide-fade-right` | `animation: velin-slide-fade-right var(--velin-duration-normal) var(--velin-ease-out) both;` | | `.velin-animate-slide-fade-right` | `animation: none; opacity: 1; filter: none; transform: none; clip-path: none;` | | `.velin-animate-slide-left` | `animation: velin-slide-left var(--velin-duration-normal) var(--velin-ease-out) both;` | | `.velin-animate-slide-right` | `animation: velin-slide-right var(--velin-duration-normal) var(--velin-ease-out) both;` | | `.velin-animate-slide-up` | `animation: velin-slide-up var(--velin-duration-normal) var(--velin-ease-out) both;` | | `.velin-animate-spin` | `animation: velin-spin 1s linear infinite;` | | `.velin-animate-swing` | `animation: velin-swing 1s var(--velin-ease-default) both; transform-origin: top center;` | | `.velin-animate-tada` | `animation: velin-tada 1s var(--velin-ease-default) both;` | | `.velin-animate-wiggle` | `animation: velin-wiggle 1s var(--velin-ease-default) infinite;` | | `.velin-animate-zoom-in` | `animation: velin-zoom-in var(--velin-duration-normal) var(--velin-ease-out) both;` |