Animazioni

Il modulo animazioni e distribuito come file opzionale separato cosi il foglio di stile principale resta sotto gli 8 KB gzipped.

<link
  rel="stylesheet"
  href="/css/skeletonic-animations.min.css">

Ogni classe di animazione e racchiusa in un blocco @media (prefers-reduced-motion: no-preference) nella v2.0.0, il che significa che un utente che ha impostato "ridurre il movimento" a livello di sistema operativo non vedra alcuna animazione — il layout funziona comunque, il movimento viene semplicemente soppresso.

JavaScript is disabled. The animation gallery needs JS for the hover-replay and copy-class interactions, but every animation itself is pure CSS — pulling skeletonic-animations.min.css into your page and applying any class on this page works without any script.

Your OS has Reduce Motion enabled. Skeletonic correctly honours that — every keyframe is gated behind prefers-reduced-motion: no-preference, so the targets below will stay still. To preview the demos:

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

Copied .bounce