/* FADE IN */
@keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  /* SLIDE LEFT */
  @keyframes slideLeft {
    from {
      transform: translateX(100px);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  /* SLIDE RIGHT */
  @keyframes slideRight {
    from {
      transform: translateX(-100px);
      opacity: 0;
    } 
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  
  /* SLIDE UP */
  @keyframes slideUp {
    from {
      transform: translateY(50px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  /* SCALE UP */
  @keyframes scaleUp {
    from {
      transform: scale(0.8);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  /* FLIP IN */
  @keyframes flipIn {
    from {
      transform: perspective(400px) rotateY(90deg);
      opacity: 0;
    }
    to {
      transform: perspective(400px) rotateY(0deg);
      opacity: 1;
    }
  }
  
  /* BOUNCE IN */
  @keyframes bounceIn {
    0% {
      transform: scale(0.3);
      opacity: 0;
    }
    50% {
      transform: scale(1.05);
      opacity: 0.9;
    }
    70% {
      transform: scale(0.9);
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  /* ROTATE IN */
  @keyframes rotateIn {
    from {
      transform: rotate(-200deg);
      opacity: 0;
    }
    to {
      transform: rotate(0);
      opacity: 1;
    }
  }
  
  /* BLUR IN */
  @keyframes blurIn {
    from {
      filter: blur(20px);
      opacity: 0;
    }
    to {
      filter: blur(0);
      opacity: 1;
    }
  }
  
  /* SWING */
  @keyframes swing {
    20% {
      transform: rotate3d(0, 0, 1, 15deg);
    }
    40% {
      transform: rotate3d(0, 0, 1, -10deg);
    }
    60% {
      transform: rotate3d(0, 0, 1, 5deg);
    }
    80% {
      transform: rotate3d(0, 0, 1, -5deg);
    }
    to {
      transform: rotate3d(0, 0, 1, 0deg);
    }
  }
  
  /* REVEAL LEFT */
  @keyframes revealLeft {
    from {
      clip-path: inset(0 100% 0 0);
    }
    to {
      clip-path: inset(0 0 0 0);
    }
  }
  
  /* CLASSES D'UTILISATION */
  .animate {
    animation-duration: 1s;
    animation-fill-mode: both;
  }
  
  .animate-fadeIn { animation-name: fadeIn; }
  .animate-slideLeft { animation-name: slideLeft; }
  .animate-slideRight { animation-name: slideRight; }
  .animate-slideUp { animation-name: slideUp; }
  .animate-scaleUp { animation-name: scaleUp; }
  .animate-flipIn { animation-name: flipIn; }
  .animate-bounceIn { animation-name: bounceIn; }
  .animate-rotateIn { animation-name: rotateIn; }
  .animate-blurIn { animation-name: blurIn; }
  .animate-swing { animation-name: swing; }
  .animate-revealLeft { animation-name: revealLeft; }