92 lines
1.3 KiB
CSS
92 lines
1.3 KiB
CSS
/* Animation Utilities */
|
|
|
|
/* Cursor blink animation */
|
|
.cursor {
|
|
animation: cursor-blink 0.7s infinite;
|
|
}
|
|
|
|
@keyframes cursor-blink {
|
|
0%, 100% {
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Reverse spin */
|
|
.animate-spin-reverse {
|
|
animation: spin-reverse 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin-reverse {
|
|
from {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* Fire-inspired animations */
|
|
.animate-flicker {
|
|
animation: flicker 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes flicker {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.8;
|
|
transform: scale(0.98);
|
|
}
|
|
}
|
|
|
|
.animate-glow {
|
|
animation: glow 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes glow {
|
|
0%, 100% {
|
|
box-shadow: 0 0 20px rgba(250, 93, 25, 0.5);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 40px rgba(250, 93, 25, 0.8);
|
|
}
|
|
}
|
|
|
|
/* Smooth transitions */
|
|
.transition-all {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.transition-colors {
|
|
transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
|
|
}
|
|
|
|
.transition-transform {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.transition-opacity {
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
/* Animation delays */
|
|
.delay-100 {
|
|
animation-delay: 100ms;
|
|
}
|
|
|
|
.delay-200 {
|
|
animation-delay: 200ms;
|
|
}
|
|
|
|
.delay-300 {
|
|
animation-delay: 300ms;
|
|
}
|
|
|
|
.delay-400 {
|
|
animation-delay: 400ms;
|
|
}
|
|
|
|
.delay-500 {
|
|
animation-delay: 500ms;
|
|
} |