Animaciones

El modulo de animaciones se distribuye como un archivo separado opcional para que la hoja de estilos principal se mantenga por debajo de 8 KB gzipped.

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

Cada clase de animacion esta envuelta en un bloque @media (prefers-reduced-motion: no-preference) en v2.0.0, lo que significa que un usuario que haya activado "reducir movimiento" a nivel del sistema operativo no vera ninguna animacion — el layout sigue funcionando, el movimiento simplemente se suprime.

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