animations.css•2.77 kB
/* animations.css - All animations and transitions */
/* Loading dots bounce animation */
@keyframes bounce {
0%, 80%, 100% {
transform: scale(0.8);
opacity: 0.5;
}
40% {
transform: scale(1.2);
opacity: 1;
}
}
/* Loading wave animation */
@keyframes loading-wave {
0%, 80%, 100% {
transform: scale(0.8);
opacity: 0.5;
}
40% {
transform: scale(1.2);
opacity: 1;
}
}
/* Pulse animation for voice button */
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
/* Sound wave animation for speaking state */
@keyframes sound-wave {
0%, 100% {
transform: scale(1);
opacity: 0.8;
}
50% {
transform: scale(1.15);
opacity: 1;
}
}
/* Fade in animation for modals */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Slide in animation for command menu */
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Hover animations */
.command-item:hover {
transform: translateX(0.3125rem);
}
.voice-btn:hover {
transform: scale(1.1);
}
/* Transition classes */
.fade-in {
animation: fadeIn 0.3s ease-out;
}
.slide-in {
animation: slideIn 0.3s ease-out;
}
/* Smooth transitions for all interactive elements */
button,
input,
.command-item,
.modal,
.command-menu {
transition: background var(--transition-fast) ease, border-color var(--transition-fast) ease, opacity var(--transition-fast) ease, transform var(--transition-fast) ease;
}
/* Wave animation for chat messages */
.wave {
display: inline-block;
animation: wave 1.5s ease-in-out 3 forwards;
transform-origin: 70% 70%;
}
@keyframes wave {
0%, 60%, 100% { transform: rotate(0deg); }
10%, 30%, 50% { transform: rotate(20deg); }
20%, 40% { transform: rotate(-15deg); }
}
/* Pulsating Brain */
.pulse-brain {
display: inline-block;
animation: pulse 1.5s ease-in-out 3 forwards;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
/* Shaking "No" sign */
.shake-no {
display: inline-block;
animation: shake 0.4s ease-in-out 3 forwards;
}
@keyframes shake {
0% { transform: translate(0, 0) rotate(0); }
25% { transform: translate(-1px, 0) rotate(-5deg); }
50% { transform: translate(1px, 0) rotate(5deg); }
75% { transform: translate(-1px, 0) rotate(-5deg); }
100% { transform: translate(0, 0) rotate(0); }
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms;
animation-iteration-count: 1;
transition-duration: 0.01ms;
}
}