animations.css•10 kB
/* ====================================
✨ Animation & Effects - Modern UI Animations
==================================== */
/* Keyframe Animations */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes slideInUp {
from {
transform: translateY(30px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slideInDown {
from {
transform: translateY(-30px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slideInLeft {
from {
transform: translateX(-30px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideInRight {
from {
transform: translateX(30px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideOutUp {
from {
transform: translateY(0);
opacity: 1;
}
to {
transform: translateY(-30px);
opacity: 0;
}
}
@keyframes scaleIn {
from {
transform: scale(0.9);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
@keyframes scaleOut {
from {
transform: scale(1);
opacity: 1;
}
to {
transform: scale(0.9);
opacity: 0;
}
}
@keyframes bounce {
0%, 20%, 53%, 80%, 100% {
transform: translate3d(0, 0, 0);
}
40%, 43% {
transform: translate3d(0, -30px, 0);
}
70% {
transform: translate3d(0, -15px, 0);
}
90% {
transform: translate3d(0, -4px, 0);
}
}
@keyframes shake {
0%, 100% {
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
transform: translateX(10px);
}
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.05);
opacity: 0.8;
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
@keyframes glow {
0%, 100% {
box-shadow: 0 0 5px var(--primary-color);
}
50% {
box-shadow: 0 0 20px var(--primary-color), 0 0 30px var(--primary-light);
}
}
@keyframes wave {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(15deg);
}
75% {
transform: rotate(-15deg);
}
100% {
transform: rotate(0deg);
}
}
/* Loading Animations */
.loading-dots {
display: inline-block;
}
.loading-dots::after {
content: '';
animation: dots 1.5s steps(5, end) infinite;
}
@keyframes dots {
0%, 20% {
color: rgba(0, 0, 0, 0);
text-shadow:
.25em 0 0 rgba(0, 0, 0, 0),
.5em 0 0 rgba(0, 0, 0, 0);
}
40% {
color: var(--text-primary);
text-shadow:
.25em 0 0 rgba(0, 0, 0, 0),
.5em 0 0 rgba(0, 0, 0, 0);
}
60% {
text-shadow:
.25em 0 0 var(--text-primary),
.5em 0 0 rgba(0, 0, 0, 0);
}
80%, 100% {
text-shadow:
.25em 0 0 var(--text-primary),
.5em 0 0 var(--text-primary);
}
}
/* Skeleton Loading */
.skeleton {
background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
}
@keyframes skeleton-loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
.skeleton-text {
height: 1em;
border-radius: var(--radius-sm);
margin-bottom: var(--spacing-sm);
}
.skeleton-title {
height: 1.5em;
width: 70%;
border-radius: var(--radius-sm);
margin-bottom: var(--spacing-md);
}
.skeleton-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
}
/* Hover Effects */
.hover-lift {
transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.hover-lift:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.hover-scale {
transition: transform var(--transition-normal);
}
.hover-scale:hover {
transform: scale(1.02);
}
.hover-glow {
transition: box-shadow var(--transition-normal);
}
.hover-glow:hover {
box-shadow: 0 0 20px rgba(79, 70, 229, 0.3);
}
/* Click Animations */
.click-bounce:active {
animation: click-bounce 0.3s ease;
}
@keyframes click-bounce {
0% {
transform: scale(1);
}
50% {
transform: scale(0.95);
}
100% {
transform: scale(1);
}
}
/* Progress Animations */
.progress-bar {
background: var(--bg-secondary);
border-radius: var(--radius-lg);
overflow: hidden;
height: 8px;
}
.progress-fill {
height: 100%;
background: var(--primary-gradient);
border-radius: var(--radius-lg);
transition: width var(--transition-slow);
position: relative;
}
.progress-fill::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
animation: progress-shine 2s infinite;
}
@keyframes progress-shine {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
/* Countup Animation */
.countup {
display: inline-block;
transition: all var(--transition-slow);
}
/* Typewriter Effect */
.typewriter {
overflow: hidden;
border-right: 2px solid var(--primary-color);
white-space: nowrap;
margin: 0 auto;
animation:
typing 3s steps(40, end),
blink-caret 0.75s step-end infinite;
}
@keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}
@keyframes blink-caret {
from, to {
border-color: transparent;
}
50% {
border-color: var(--primary-color);
}
}
/* Scroll Animations */
.fade-in-up {
opacity: 0;
transform: translateY(30px);
transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.fade-in-up.animate {
opacity: 1;
transform: translateY(0);
}
.fade-in-left {
opacity: 0;
transform: translateX(-30px);
transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.fade-in-left.animate {
opacity: 1;
transform: translateX(0);
}
.fade-in-right {
opacity: 0;
transform: translateX(30px);
transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.fade-in-right.animate {
opacity: 1;
transform: translateX(0);
}
/* Stagger Animation */
.stagger-children > * {
opacity: 0;
transform: translateY(20px);
animation: stagger-in var(--transition-slow) ease forwards;
}
.stagger-children > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.5s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.6s; }
.stagger-children > *:nth-child(7) { animation-delay: 0.7s; }
.stagger-children > *:nth-child(8) { animation-delay: 0.8s; }
.stagger-children > *:nth-child(9) { animation-delay: 0.9s; }
.stagger-children > *:nth-child(10) { animation-delay: 1.0s; }
@keyframes stagger-in {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Morphing Animations */
.morph {
transition: border-radius var(--transition-slow), transform var(--transition-slow);
}
.morph:hover {
border-radius: 50%;
transform: rotate(180deg);
}
/* Particle Effects */
.particles {
position: relative;
overflow: hidden;
}
.particles::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 20%, var(--primary-light) 1px, transparent 1px),
radial-gradient(circle at 80% 80%, var(--secondary-light) 1px, transparent 1px),
radial-gradient(circle at 40% 60%, var(--accent-purple) 1px, transparent 1px);
background-size: 50px 50px, 80px 80px, 60px 60px;
opacity: 0.1;
animation: float 6s ease-in-out infinite;
pointer-events: none;
}
/* Text Animations */
.text-gradient {
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradient-shift 3s ease-in-out infinite;
}
@keyframes gradient-shift {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
/* Interactive Elements */
.interactive {
cursor: pointer;
transition: all var(--transition-normal);
}
.interactive:hover {
transform: translateY(-2px);
}
.interactive:active {
transform: translateY(0);
}
/* Loading States */
.loading {
pointer-events: none;
opacity: 0.7;
}
.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid var(--border-color);
border-top: 2px solid var(--primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
}
/* Error States */
.error-shake {
animation: shake 0.5s ease-in-out;
}
.error-glow {
animation: glow 0.5s ease-in-out;
}
/* Success States */
.success-bounce {
animation: bounce 0.6s ease;
}
/* Responsive Animations */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.loading-spinner {
animation: none;
border: 2px solid var(--primary-color);
}
}
/* High Contrast Mode */
@media (prefers-contrast: high) {
.hover-lift:hover,
.hover-scale:hover,
.hover-glow:hover {
transform: none;
box-shadow: none;
border: 2px solid var(--text-primary);
}
}
/* Dark Mode Adjustments */
[data-theme="dark"] {
--bg-primary: #0a0a0a;
--bg-secondary: #1a1a1a;
--text-primary: #ffffff;
}
/* Print Mode */
@media print {
* {
animation: none !important;
transition: none !important;
}
}