noteflow/public/css/animations.css

/* Animations CSS */

/* Fade in */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Backdrop fade - GPU accelerated */
@keyframes backdropFade {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(4px);
  }
}

/* Modal open animation - GPU accelerated */
@keyframes modalOpen {
  from {
    opacity: 0;
    transform: scale3d(0.9, 0.9, 1) translateZ(0);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1) translateZ(0);
  }
}

/* Slide in from bottom - GPU accelerated */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Slide in from right - GPU accelerated */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translate3d(20px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Card hover animation */
@keyframes cardHover {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-4px);
  }
}

/* Pulse animation */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Spin animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Application des animations */
.modal-backdrop {
  animation: backdropFade 0.25s ease-out;
  will-change: opacity, backdrop-filter;
}

.modal-content {
  animation: modalOpen 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, opacity;
  backface-visibility: hidden;
  perspective: 1000px;
}

.note-card {
  animation: slideInUp 0.25s ease-out;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.todo-item {
  animation: slideInRight 0.2s ease-out;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.user-dropdown {
  animation: slideInUp 0.2s ease-out;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Animation pour le modal image */
.image-modal {
  will-change: opacity;
}

.image-modal-content {
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Loading state */
.loading {
  animation: pulse 1.5s ease-in-out infinite;
}

.spinning {
  animation: spin 1s linear infinite;
}

.spinner {
  animation: spin 1s linear infinite;
  width: 20px;
  height: 20px;
}

/* Smooth transitions */
.smooth-transition {
  transition: all var(--transition-base);
}

.smooth-transition-slow {
  transition: all var(--transition-slow);
}