Ang module ng animasyon ay ipinapadala bilang isang hiwalay na opsyonal na file upang manatili ang core stylesheet sa ilalim ng 8 KB gzipped.
< link
rel =" stylesheet "
href =" /css/skeletonic-animations.min.css ">
Bawat animation class ay nakabalot sa isang
@media (prefers-reduced-motion: no-preference)
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:
Show animations anyway
or open DevTools → Rendering → Emulate CSS media feature
prefers-reduced-motion → no-preference .
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