Whimsical
Whimsical Animations
Delightful CSS animations and visual effects
unknown
Overview
Whimsical is a collection of CSS animations and visual effects to add personality and delight to user interfaces
.im-whimsical-bounce.im-whimsical-spin-wobbleArchitecture Integration
Whimsical animations and utilities are exported as a standalone package and can be used inside of the integral.whimsical layer.
Available Animations
Complete Animation Reference
Bounce Animations
.im-whimsical-bounce- Continuous bounce effect.im-whimsical-bounce-in- Bounce entrance animation.im-whimsical-bounce-out- Bounce exit animation
Fade Animations
.im-whimsical-fade-in- Simple fade in.im-whimsical-fade-out- Simple fade out.im-whimsical-fade-in-up- Fade in from below.im-whimsical-fade-in-down- Fade in from above
Slide Animations
.im-whimsical-slide-in-left- Slide in from left.im-whimsical-slide-in-right- Slide in from right.im-whimsical-slide-out-left- Slide out to left.im-whimsical-slide-out-right- Slide out to right
Spin Animations
.im-whimsical-spin- Continuous spin (1s).im-whimsical-spin-slow- Slower spin (3s).im-whimsical-spin-reverse- Reverse spin.im-whimsical-spin-wobble- Wobbling spin effect
Pulse Animations
.im-whimsical-pulse- Scale pulse effect.im-whimsical-pulse-glow- Glowing pulse (box-shadow).im-whimsical-heartbeat- Double pulse heartbeat
Morph Animations
.im-whimsical-morph- Border radius morphing.im-whimsical-morph-rotate- Morphing with rotation.im-whimsical-blob- Blob-like movement.im-whimsical-blob-bg- Background blob effect
Glow Effects
.im-whimsical-glow- Animated glow.im-whimsical-glow-text- Text glow animation.im-whimsical-glow-static- Static glow effect.im-whimsical-glow-hover- Glow on hover
Shimmer Effects
.im-whimsical-shimmer- Shimmer overlay.im-whimsical-shimmer-text- Text shimmer effect.im-whimsical-skeleton- Skeleton loading effect