الحركات

وحدة الحركات تُشحن كملف اختياري منفصل حتى تبقى ورقة الأنماط الأساسية تحت 8 كيلوبايت مضغوط.

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

كل فئة حركة مغلّفة في كتلة @media (prefers-reduced-motion: no-preference) في الإصدار 2.0.0، مما يعني أن المستخدم الذي ضبط "تقليل الحركة" على مستوى نظام التشغيل لن يرى أي حركة — التخطيط يبقى يعمل، الحركة فقط تُكتم.

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