Motsin Rai

Module na motsin rai an aika shi azaman fayil na daban na zaɓi don stylesheet na tushe ya kasance ƙasa da 8 KB gzipped.

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

An nannaɗe kowane ajin motsin rai a cikin tubalan @media (prefers-reduced-motion: no-preference) a v2.0.0, wanda ke nufin mai amfani da ya saita "rage motsi" a matakin OS ba zai ga kowane motsin rai ba — tsarin har yanzu yana aiki, motsin kawai an danne shi.

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