Animations

Le module d'animations est livré dans un fichier optionnel séparé afin que la feuille de style principale reste sous 8 Ko gzippé.

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

Chaque classe d'animation est encapsulée dans un bloc @media (prefers-reduced-motion: no-preference) dans la v2.0.0, ce qui signifie qu'un utilisateur ayant activé « réduire les animations » au niveau du système d'exploitation ne verra aucune animation — la mise en page fonctionne toujours, seul le mouvement est supprimé.

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