Docs / Animation

Animation

vel-src: animations.css

Utilities for applying CSS keyframe animations.

ClassProperties
vel-animate-noneanimation: none
vel-animate-spinanimation: vel-spin 1s linear infinite
vel-animate-pinganimation: vel-ping 1s cubic-bezier(0,0,0.2,1) infinite
vel-animate-pulseanimation: vel-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite
vel-animate-bounceanimation: vel-bounce 1s infinite
vel-animate-fade-inanimation: vel-fade-in 0.3s ease forwards
vel-animate-fade-outanimation: vel-fade-out 0.3s ease forwards
vel-animate-slide-upanimation: vel-slide-up 0.3s ease forwards
vel-animate-slide-downanimation: vel-slide-down 0.3s ease forwards
vel-animate-slide-in-leftanimation: vel-slide-in-left 0.3s ease forwards
vel-animate-slide-in-rightanimation: vel-slide-in-right 0.3s ease forwards
vel-animate-zoom-inanimation: vel-zoom-in 0.3s ease forwards
vel-animate-zoom-outanimation: vel-zoom-out 0.3s ease forwards
vel-animate-wiggleanimation: vel-wiggle 0.5s ease-in-out
vel-animate-shimmeranimation: vel-shimmer 1.5s infinite
vel-animate-onceanimation-iteration-count: 1
vel-animate-infiniteanimation-iteration-count: infinite
vel-animate-pausedanimation-play-state: paused

Examples

Spinning loader

example.html
<div class="vel-animate-spin" style="width:2rem;height:2rem;border:3px solid #7c5cfc;border-top-color:transparent;border-radius:50%"></div>

Fade in on load

This fades in
example.html
<div class="vel-animate-fade-in" style="padding:1rem 1.5rem;background:#0d1422;border:1px solid #1e2d45;border-radius:0.5rem;color:#e2e8f0">
  This fades in
</div>

Pulse skeleton loader

example.html
<div class="vel-animate-pulse" style="height:1rem;border-radius:0.25rem;background:#1a2236;width:12rem"></div>

Pause animation on hover

example.html
<div class="vel-animate-spin vel-hover:animate-paused" style="width:2rem;height:2rem;border:3px solid #0ecb81;border-top-color:transparent;border-radius:50%"></div>