5346d6d0c9
- Add new libraries: ui-accessibility, ui-animations, ui-backgrounds, ui-code-display, ui-data-utils, ui-font-manager, hcl-studio - Add extensive layout components: gallery-grid, infinite-scroll-container, kanban-board, masonry, split-view, sticky-layout - Add comprehensive demo components for all new features - Update project configuration and dependencies - Expand component exports and routing structure - Add UI landing pages planning document 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
142 lines
3.3 KiB
SCSS
142 lines
3.3 KiB
SCSS
// Emphasis Animations
|
|
// Attention-grabbing animations for highlighting elements
|
|
|
|
// Bounce
|
|
@keyframes bounce {
|
|
0%, 20%, 53%, 80%, 100% {
|
|
transform: translateY(0);
|
|
}
|
|
40%, 43% {
|
|
transform: translateY(-24px);
|
|
}
|
|
70% {
|
|
transform: translateY(-8px);
|
|
}
|
|
90% {
|
|
transform: translateY(-4px);
|
|
}
|
|
}
|
|
|
|
.animate-bounce {
|
|
animation: bounce 0.6s ease-in-out;
|
|
}
|
|
|
|
// Shake
|
|
@keyframes shake {
|
|
0%, 100% { transform: translateX(0); }
|
|
10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
|
|
20%, 40%, 60%, 80% { transform: translateX(4px); }
|
|
}
|
|
|
|
.animate-shake {
|
|
animation: shake 0.6s ease-in-out;
|
|
}
|
|
|
|
// Pulse
|
|
@keyframes pulse {
|
|
0% { transform: scale(1); }
|
|
50% { transform: scale(1.05); }
|
|
100% { transform: scale(1); }
|
|
}
|
|
|
|
.animate-pulse {
|
|
animation: pulse 0.6s ease-in-out infinite;
|
|
}
|
|
|
|
// Flash
|
|
@keyframes flash {
|
|
0%, 50%, 100% { opacity: 1; }
|
|
25%, 75% { opacity: 0; }
|
|
}
|
|
|
|
.animate-flash {
|
|
animation: flash 0.6s ease-in-out;
|
|
}
|
|
|
|
// Wobble
|
|
@keyframes wobble {
|
|
0% { transform: translateX(0%); }
|
|
15% { transform: translateX(-25%) rotate(-5deg); }
|
|
30% { transform: translateX(20%) rotate(3deg); }
|
|
45% { transform: translateX(-15%) rotate(-3deg); }
|
|
60% { transform: translateX(10%) rotate(2deg); }
|
|
75% { transform: translateX(-5%) rotate(-1deg); }
|
|
100% { transform: translateX(0%); }
|
|
}
|
|
|
|
.animate-wobble {
|
|
animation: wobble 0.6s ease-in-out;
|
|
}
|
|
|
|
// Swing
|
|
@keyframes swing {
|
|
20% { transform: rotate(15deg); }
|
|
40% { transform: rotate(-10deg); }
|
|
60% { transform: rotate(5deg); }
|
|
80% { transform: rotate(-5deg); }
|
|
100% { transform: rotate(0deg); }
|
|
}
|
|
|
|
.animate-swing {
|
|
animation: swing 0.6s ease-in-out;
|
|
transform-origin: top center;
|
|
}
|
|
|
|
// Rubber Band
|
|
@keyframes rubberBand {
|
|
0% { transform: scaleX(1); }
|
|
30% { transform: scaleX(1.25) scaleY(0.75); }
|
|
40% { transform: scaleX(0.75) scaleY(1.25); }
|
|
50% { transform: scaleX(1.15) scaleY(0.85); }
|
|
65% { transform: scaleX(0.95) scaleY(1.05); }
|
|
75% { transform: scaleX(1.05) scaleY(0.95); }
|
|
100% { transform: scaleX(1) scaleY(1); }
|
|
}
|
|
|
|
.animate-rubber-band {
|
|
animation: rubberBand 0.6s ease-in-out;
|
|
}
|
|
|
|
// Tada
|
|
@keyframes tada {
|
|
0% { transform: scaleX(1) scaleY(1); }
|
|
10%, 20% { transform: scaleX(0.9) scaleY(0.9) rotate(-3deg); }
|
|
30%, 50%, 70%, 90% { transform: scaleX(1.1) scaleY(1.1) rotate(3deg); }
|
|
40%, 60%, 80% { transform: scaleX(1.1) scaleY(1.1) rotate(-3deg); }
|
|
100% { transform: scaleX(1) scaleY(1) rotate(0); }
|
|
}
|
|
|
|
.animate-tada {
|
|
animation: tada 0.6s ease-in-out;
|
|
}
|
|
|
|
// Heartbeat
|
|
@keyframes heartbeat {
|
|
0% { transform: scale(1); }
|
|
14% { transform: scale(1.3); }
|
|
28% { transform: scale(1); }
|
|
42% { transform: scale(1.3); }
|
|
70% { transform: scale(1); }
|
|
}
|
|
|
|
.animate-heartbeat {
|
|
animation: heartbeat 0.6s ease-in-out infinite;
|
|
}
|
|
|
|
// Jello
|
|
@keyframes jello {
|
|
11.1% { transform: skewX(-12.5deg) skewY(-12.5deg); }
|
|
22.2% { transform: skewX(6.25deg) skewY(6.25deg); }
|
|
33.3% { transform: skewX(-3.125deg) skewY(-3.125deg); }
|
|
44.4% { transform: skewX(1.5625deg) skewY(1.5625deg); }
|
|
55.5% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
|
|
66.6% { transform: skewX(0.390625deg) skewY(0.390625deg); }
|
|
77.7% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }
|
|
88.8% { transform: skewX(0.09765625deg) skewY(0.09765625deg); }
|
|
100% { transform: skewX(0) skewY(0); }
|
|
}
|
|
|
|
.animate-jello {
|
|
animation: jello 0.6s ease-in-out;
|
|
transform-origin: center;
|
|
} |