Animation

vel-src: animations.css

Utilities for applying CSS keyframe animations.

Class	Properties
vel-animate-none	animation: none
vel-animate-spin	animation: vel-spin 1s linear infinite
vel-animate-ping	animation: vel-ping 1s cubic-bezier(0,0,0.2,1) infinite
vel-animate-pulse	animation: vel-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite
vel-animate-bounce	animation: vel-bounce 1s infinite
vel-animate-fade-in	animation: vel-fade-in 0.3s ease forwards
vel-animate-fade-out	animation: vel-fade-out 0.3s ease forwards
vel-animate-slide-up	animation: vel-slide-up 0.3s ease forwards
vel-animate-slide-down	animation: vel-slide-down 0.3s ease forwards
vel-animate-slide-in-left	animation: vel-slide-in-left 0.3s ease forwards
vel-animate-slide-in-right	animation: vel-slide-in-right 0.3s ease forwards
vel-animate-zoom-in	animation: vel-zoom-in 0.3s ease forwards
vel-animate-zoom-out	animation: vel-zoom-out 0.3s ease forwards
vel-animate-wiggle	animation: vel-wiggle 0.5s ease-in-out
vel-animate-shimmer	animation: vel-shimmer 1.5s infinite
vel-animate-once	animation-iteration-count: 1
vel-animate-infinite	animation-iteration-count: infinite
vel-animate-paused	animation-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>