Skeletonic Stylus

45 keyframes across 9 families, every one gated behind @media (prefers-reduced-motion: no-preference). Hover any card to replay. Click a card to copy the class.

bounce Distracting
pulse Distracting
shake Distracting
wobble Distracting
flash Distracting
heartbeat Distracting
jelly Distracting
rubber Distracting
swing Distracting
tada Distracting
chameleonbackground Distracting
Aa chameleontext Distracting
fadeIn Fading
fadeInDown Fading
fadeInUp Fading
fadeInLeft Fading
fadeInRight Fading
fadeOut Fading
fadeOutDown Fading
fadeOutUp Fading
fadeOutLeft Fading
fadeOutRight Fading
flip Flipping
flipInHorizontal Flipping
flipInVertical Flipping
flipOutHorizontal Flipping
flipOutVertical Flipping
slideInDown Sliding
slideInUp Sliding
slideInLeft Sliding
slideInRight Sliding
slideOutDown Sliding
slideOutUp Sliding
slideOutLeft Sliding
slideOutRight Sliding
spinLeft Rotating
spinRight Rotating
zoomIn Zooming
zoomOut Zooming
rollIn Rolling
rollOut Rolling
popIn Pop
popOut Pop
vanishIn Vanishing
vanishOut Vanishing

Usage

Pull the optional animations bundle into your page (this site does exactly that — see the <link> tag in the head when this page is loaded):

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@sebastienrousseau/skeletonic-stylus@2.0.0/css/animations/skeletonic-animations.min.css">

Apply any class from the gallery above and it works:

<div class="bounce">Bounces once over 1 s.</div>
<div class="spinLeft">Spins forever.</div>
<div class="fadeIn">Fades in over 1 s and stays visible.</div>

Every animation class ships with sensible defaults — 1 s duration, ease-in-out timing, both fill mode, and 1 iteration for one-shots, infinite for the continuous loops (pulse, heartbeat, spinLeft, spinRight, chameleonbackground, chameleontext).

To customise:

.my-target {
  animation-duration: 600ms;          /* faster */
  animation-iteration-count: infinite; /* loop */
}

Single declaration, WCAG 2.3.3 compliant — every keyframe sits inside @media (prefers-reduced-motion: no-preference), so a user who has set "reduce motion" at the OS level sees no motion at all.

See accessibility notes →