/************
 * * Fade
*************/
.fade-in-scroll {
    animation: fade-in 1s ease-in-out forwards;
    -webkit-animation: fade-in 1s ease-in-out forwards;
    animation-timeline: view();

  }
@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


.fade-down-scroll {
    animation: fade-down 1s ease-out forwards;
    -webkit-animation: fade-down 1s ease-out forwards;
    animation-timeline: view();

}
@keyframes fade-down {
    from {
      opacity: 0;
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
    }
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
}    
  


      
.fade-left-scroll {
    animation: fade-left 1s ease-in-out forwards; 
    -webkit-animation: fade-left 1s ease-in-out forwards;
    animation-timeline: view();

}
@keyframes fade-left {
    from {
      opacity: 0;
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
    }
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
}


.fade-right-scroll {
    animation: fade-right 1s ease-in-out forwards;
    -webkit-animation: fade-right 1s ease-in-out forwards;
    animation-timeline: view();

}
@keyframes fade-right {
    from {
      opacity: 0;
      -webkit-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0);
    }
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
}

.fade-up-scroll {
    animation: fade-up 1s ease-out forwards;
    -webkit-animation: fade-up 1s ease-out forwards;
    animation-timeline: view();

}
@keyframes fade-up {
    from {
      opacity: 0;
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
    }
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
}


/************
 * * Fade out
*************/

.fade-out-scroll {
    animation: fade-out 1s ease-out forwards;
    -webkit-animation: fade-out 1s ease-out forwards;
    animation-timeline: view();

}
@keyframes fade-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
}

/************
 * * Fly 
*************/

.fly-in-scroll {
    animation: fly-in 1s ease-out forwards;
    -webkit-animation: fly-in 1s ease-out forwards;
    animation-timeline: view();

}
  @keyframes fly-in {
    from {
      opacity: 0;
      transform: translate3d(-100%, 0, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
}
  
.fly-down-scroll {
    animation: fly-down 1s ease-out forwards;
    -webkit-animation: fly-down 1s ease-out forwards;
    animation-timeline: view();

}
@keyframes fly-down {
    from {
      opacity: 0;
      transform: translate3d(0, -100%, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
}
  
.fly-up-scroll {
    animation: fly-up 1s ease-out forwards;
    -webkit-animation: fly-up 1s ease-out forwards;
    animation-timeline: view();

}
@keyframes fly-up {
    from {
      opacity: 0;
      transform: translate3d(0, 100%, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
}
  
.fly-right-scroll {
    animation: fly-right linear;
    -webkit-animation: fly-right linear;
    animation-timeline: view();

}
@keyframes fly-right {
    from {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
}
  
.fly-left-scroll {
    animation: fly-left linear;
    -webkit-animation: fly-left linear;
    animation-timeline: view();

}
@keyframes fly-left {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
  
/************
 * * Fly out
*************/
.fly-out-scroll {
    animation: fly-out linear;
    -webkit-animation: fly-out linear;
    animation-timeline: view();

}
@keyframes fly-out {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    to {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
}

/************
 * * Other animations
*************/


.jiggle-scroll {
    animation: jiggle linear;
    -webkit-animation: jiggle linear;
    animation-timeline: view();

}
@keyframes jiggle {
    0% {
      transform: scale3d(1, 1, 1);
    }
    30% {
      transform: scale3d(1.25, 0.75, 1);
    }
    40% {
      transform: scale3d(0.75, 1.25, 1);
    }
    50% {
      transform: scale3d(1.15, 0.85, 1);
    }
    65% {
      transform: scale3d(0.95, 1.05, 1);
    }
    75% {
      transform: scale3d(1.05, 0.95, 1);
    }
    100% {
      transform: scale3d(1, 1, 1);
    }
}

.shake-scroll {
    animation: shake linear;
    -webkit-animation: shake linear;
    animation-timeline: view();

}
@keyframes shake {
    0%,
    100% {
      transform: translateX(0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
      transform: translateX(-10px);
    }
    20%,
    40%,
    60%,
    80% {
      transform: translateX(10px);
    }
}

.wiggle-scroll {
    animation: wiggle linear;
    -webkit-animation: wiggle linear;
    animation-timeline: view();

}
  @keyframes wiggle {
    0%,
    100% {
      transform: translateX(0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
      transform: translateX(-10px);
    }
    20%,
    40%,
    60%,
    80% {
      transform: translateX(10px);
    }
}
.scale-scroll{
  
  animation: scale linear;
  animation-timeline: view(80% auto);
  
}
@keyframes scale {
  from{
    opacity: 0.4;
    scale:0.2;
  }to{
    opacity: 1;
    scale: 1;
  }
}