Transition

vel-src: transitions.css

Utilities for controlling CSS transitions.

Class	Properties
vel-transition-none	transition: none
vel-transition	transition: all 150ms ease
vel-transition-colors	transition: color, background-color, border-color, text-decoration-color, fill, stroke 150ms ease
vel-transition-opacity	transition: opacity 150ms ease
vel-transition-shadow	transition: box-shadow 150ms ease
vel-transition-transform	transition: transform 150ms ease
vel-duration-75	transition-duration: 75ms
vel-duration-100	transition-duration: 100ms
vel-duration-150	transition-duration: 150ms
vel-duration-200	transition-duration: 200ms
vel-duration-300	transition-duration: 300ms
vel-duration-500	transition-duration: 500ms
vel-duration-700	transition-duration: 700ms
vel-duration-1000	transition-duration: 1000ms
vel-ease-linear	transition-timing-function: linear
vel-ease-in	transition-timing-function: cubic-bezier(0.4, 0, 1, 1)
vel-ease-out	transition-timing-function: cubic-bezier(0, 0, 0.2, 1)
vel-ease-in-out	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
vel-ease-spring	transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1)
vel-delay-75	transition-delay: 75ms
vel-delay-100	transition-delay: 100ms
vel-delay-150	transition-delay: 150ms
vel-delay-200	transition-delay: 200ms
vel-delay-300	transition-delay: 300ms
vel-delay-500	transition-delay: 500ms

Examples

Smooth color transition on hover

example.html

<button class="vel-transition-colors vel-duration-300 vel-ease-in-out vel-bg-surface-2 vel-text-white vel-p-3 vel-rounded-lg" style="background:#1a2236;color:#e2e8f0;padding:0.75rem 1.5rem;border-radius:0.5rem;border:none;cursor:pointer">
  Hover to transition
</button>

Transform transition with delay

Delayed spring transition

example.html

<div class="vel-transition-transform vel-duration-500 vel-ease-spring vel-delay-100" style="display:inline-block;padding:1rem;background:#0d1422;border:1px solid #1e2d45;border-radius:0.5rem">
  Delayed spring transition
</div>