Atlas Animations
Explore the powerful animation utilities from @casoon/atlas-styles
Fade Animations
Reload the page to see animations again
Fade In
Element fades in smoothly
Fade In Delayed
With 200ms delay
Slide Animations
Reload the page to see animations again
Slide Up
Slides from bottom
Slide Down
Slides from top
Slide Left
Slides from right
Slide Right
Slides from left
Scale & Zoom
Reload the page to see animations again
Scale In
Grows from 90% to 100%
Zoom In
Grows from 80% to 100%
Continuous Animations
Pulse
cs-pulse cs-anim-infinite
Bounce
cs-bounce cs-anim-infinite
Wiggle
Rotates back and forth
Float
cs-float cs-anim-infinite
Rotate
cs-rotate cs-anim-infinite
Heartbeat
cs-heartbeat cs-anim-infinite
3D Effects
Reload the page to see animations again
3D Reveal Up
Rotates up from bottom
3D Flip X
Flips along X axis
Animation Timing
cs-anim-xxs (fastest)
cs-anim-sm
cs-anim-md (default)
cs-anim-lg
cs-anim-xl
How to Use
cs-fade-in - Apply animation
cs-anim-md - Set duration
cs-delay-200 - Add delay
cs-anim-infinite - Loop forever
cs-ease-spring - Spring easing