/* <div class="animation" 
     data-animation="slideUp" 
     data-duration="0.6s" 
     data-delay="0.2s"
     data-stagger="4s">
  Item 2 (delay: 0.2s)
</div> */

/* paste in body */
/* <script src="/animation.js"></script> */

/* paste in head */
/* link rel="stylesheet" href="animation.css"; */




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

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

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

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

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

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

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

@keyframes zoomOut {
  from { opacity: 0; transform: scale(1.2); }
  to { opacity: 1; transform: scale(1); }
}

/* Base Animation Styles */
.animation {
  opacity: 0;
  animation-fill-mode: forwards;
}

/* Applied when element is in view */
.animation.animated {
  animation-name: var(--animation-name);
  animation-duration: var(--animation-duration, 1s);
  animation-delay: var(--animation-delay, 0s);
  animation-timing-function: var(--animation-timing, ease-out);
}