애니메이션 모듈 은 코어 스타일시트가 8 KB gzipped 미만으로 유지되도록 별도의 선택적 파일로 제공됩니다.
< link
rel =" stylesheet "
href =" /css/skeletonic-animations.min.css ">
v2.0.0에서 모든 애니메이션 클래스는 @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