@keyframes zoom {
  from { transform: translateX(0px) scale(0.5); opacity: 0; }
  to { transform: translateX(0) scale(1); opacity: 1; }
}

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

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

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

@keyframes movedown {
  from { transform: translateY(-200px) scale(0); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.zoom {
  animation: zoom linear both;
  animation-timeline: view(); /* Links animation to visibility in viewport */
  animation-range: entry 0% cover 50%; /* Start/end points of the scroll trigger */
  }
  
  .zoommore {
  animation: zoommore linear both;
  animation-timeline: view(); /* Links animation to visibility in viewport */
  animation-range: entry 0% cover 50%; /* Start/end points of the scroll trigger */
  }
  
  .moveleft {
  animation: moveleft linear both;
  animation-timeline: view(); /* Links animation to visibility in viewport */
  animation-range: entry 0% cover 50%; /* Start/end points of the scroll trigger */
}

  .moveright {
  animation: moveright linear both;
  animation-timeline: view(); /* Links animation to visibility in viewport */
  animation-range: entry 0% cover 30%; /* Start/end points of the scroll trigger */
}


  .movedown {
  animation: movedown linear both;
  animation-timeline: view(); /* Links animation to visibility in viewport */
  animation-range: entry 0% cover 30%; /* Start/end points of the scroll trigger */
}