Bits of .NET

✨ Animated Shadows = Motion Design

Static shadows are boring. Animated box shadows create delightful interactions that bring interfaces to life.

📝 Animated Shadow Examples

/* Bouncing Card */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 
        0 20px 40px rgba(0,0,0,0.15),
        0 10px 20px rgba(0,0,0,0.1);
}

/* Pulsing Button */
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(52, 152, 219, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0); }
}

.button-pulse {
    animation: pulse 1.5s ease-in-out infinite;
}

/* Floating Shadow */
@keyframes float-shadow {
    0% { transform: translateY(0px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
    50% { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.2); }
    100% { transform: translateY(0px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
}

.floating {
    animation: float-shadow 3s ease-in-out infinite;
}

/* Loading Skeleton */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

🎯 Interactive Animations

/* 3D Tilt Effect */
.tilt-card {
    transition: all 0.3s ease;
    perspective: 1000px;
    transform-style: preserve-3d;
}

.tilt-card:hover {
    transform: rotateX(5deg) rotateY(5deg);
    box-shadow: 
        20px 20px 40px rgba(0,0,0,0.2),
        -10px -10px 20px rgba(0,0,0,0.05);
}

/* Pressed Button */
.button:active {
    transform: scale(0.95);
    box-shadow: 
        inset 0 2px 4px rgba(0,0,0,0.15),
        0 2px 4px rgba(0,0,0,0.05);
}

/* Notification Dot */
@keyframes dot-pulse {
    0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.6); }
    100% { box-shadow: 0 0 0 20px rgba(231, 76, 60, 0); }
}

.notification-dot {
    animation: dot-pulse 2s ease-out infinite;
}

/* Smooth Transitions */
.transition-optimized {
    will-change: transform, box-shadow;
    transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1),
                box-shadow 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

💡 Motion Design Tips

• Use subtle animations for UX
• Consider performance (will-change)
• Use appropriate easing functions
• Test on different devices
• Don’t animate expensive properties