mycsslab/src/motion/animations.css

MyCSSLab Quantum v3.0 - Revolutionary CSS framework with AI-powered intelligence, holographic UI, neural networks, and quantum effects

/**
 * FluxCSS Animation Utilities
 * GSAP-powered animations and keyframes
 */

/* Fade Animations */
.my-fade-in { animation: fadeIn 0.5s ease-out; }
.my-fade-out { animation: fadeOut 0.5s ease-out; }
.my-fade-in-up { animation: fadeInUp 0.5s ease-out; }
.my-fade-in-down { animation: fadeInDown 0.5s ease-out; }
.my-fade-in-left { animation: fadeInLeft 0.5s ease-out; }
.my-fade-in-right { animation: fadeInRight 0.5s ease-out; }

/* Scale Animations */
.my-scale-in { animation: scaleIn 0.5s ease-out; }
.my-scale-out { animation: scaleOut 0.5s ease-out; }
.my-bounce-in { animation: bounceIn 0.6s ease-out; }
.my-zoom-in { animation: zoomIn 0.5s ease-out; }
.my-zoom-out { animation: zoomOut 0.5s ease-out; }

/* Slide Animations */
.my-slide-in-up { animation: slideInUp 0.5s ease-out; }
.my-slide-in-down { animation: slideInDown 0.5s ease-out; }
.my-slide-in-left { animation: slideInLeft 0.5s ease-out; }
.my-slide-in-right { animation: slideInRight 0.5s ease-out; }

/* Rotate Animations */
.my-rotate-in { animation: rotateIn 0.5s ease-out; }
.my-rotate-out { animation: rotateOut 0.5s ease-out; }
.my-flip-in { animation: flipIn 0.5s ease-out; }
.my-flip-out { animation: flipOut 0.5s ease-out; }

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

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes scaleOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.8);
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes zoomOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes rotateIn {
  from {
    opacity: 0;
    transform: rotate(-200deg);
  }
  to {
    opacity: 1;
    transform: rotate(0);
  }
}

@keyframes rotateOut {
  from {
    opacity: 1;
    transform: rotate(0);
  }
  to {
    opacity: 0;
    transform: rotate(200deg);
  }
}

@keyframes flipIn {
  from {
    opacity: 0;
    transform: perspective(400px) rotateY(-90deg);
  }
  to {
    opacity: 1;
    transform: perspective(400px) rotateY(0);
  }
}

@keyframes flipOut {
  from {
    opacity: 1;
    transform: perspective(400px) rotateY(0);
  }
  to {
    opacity: 0;
    transform: perspective(400px) rotateY(90deg);
  }
}