Attention Animations

Draw the user's eye with looping or one-shot attention-grabbing animations.

Available Animations

<div class="velin-animate-bounce">Bounce</div>
<div class="velin-animate-pulse">Pulse (scale throb)</div>
<div class="velin-animate-shake">Shake (horizontal)</div>
<div class="velin-animate-wiggle">Wiggle (rotation)</div>
<div class="velin-animate-ping">Ping (ripple)</div>
<div class="velin-animate-spin">Spin (360° infinite)</div>
<div class="velin-animate-rubber-band">Rubber Band</div>
<div class="velin-animate-jello">Jello (skew wobble)</div>
<div class="velin-animate-heartbeat">Heartbeat</div>
<div class="velin-animate-swing">Swing (pendulum)</div>
<div class="velin-animate-tada">Tada (scale + rotate)</div>

Infinite Loops

By default, spin and ping loop infinitely. Others play once. Add .velin-iterate-infinite to loop any animation:

<div class="velin-animate-bounce velin-iterate-infinite">
  Bouncing forever
</div>