@keyframes fade{
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}
@keyframes fade2{
  from{
    opacity: 0.5;
  }
  50%{
    opacity: 1;
  }
  to{
    opacity: 0.5;
  }
}

@keyframes anim1{
  from{
    opacity: 0;
    transform: translate(0px,-50vh);
  }
  50%{
    transform: translate(0px,0px);
  }
  70%{
    transform: translate(0px,-50px);
  }
  to{
    opacity: 1;
    transform: translate(0px,0px);
  }
}

@keyframes anim2{
  from{
    opacity: 0;
    transform: translate(0px,50%);
  }
  to{
    opacity: 1;
    transform: translate(0px,0px);
  }
}

@keyframes anim3{
  from{
    opacity: 0;
    transform: translate(-50vw,0px);
  }
  to{
    opacity: 1;
    transform: translate(0px,0px);
  }
}

@keyframes anim4{
  from{
    opacity: 0;
    transform: translate(300px,0px);
  }
  to{
    opacity: 1;
    transform: translate(0px,0px);
  }
}

@keyframes anim5{
  from{
    opacity: 0;
    transform: translate(-150px,0px);
  }
  50%{
    opacity: 1;
    transform: translate(30px,0px);
  }
  to{
    transform: translate(0px,0px);
  }
}

@keyframes anim6{
  from{
    opacity: 0;
    transform: translate(150px,0px);
  }
  50%{
    opacity: 1;
    transform: translate(-60px,0px);
  }
  to{
    transform: translate(0px,0px);
  }
}

@keyframes anim7{
  from{
    opacity: 0;
    transform: translate(0px,-200px);
  }
  50%{
    opacity: 1;
    transform: translate(0px,-0px);
  }
  to{
    transform: translate(0px,-50px);
  }
}

@keyframes anim8{
  from{
    transform: translate(30px,0px);
  }
  to{
    transform: translate(0px,0px);
  }
}

@keyframes anim9{
  from{
    opacity: 0;
    transform: translate(150px,0px);
  }
  50%{
    opacity: 1;
    transform: translate(0px,0px);
  }
  to{
    transform: translate(50px,0px);
  }
}
@keyframes anim10{
  from{
    transform: translate(0px,20px);
  }
  to{
    transform: translate(0px,0px);
  }
}
@keyframes anim11{
  from{
    opacity: 0;
    transform: translate(-150px,0px);
  }
  to{
    opacity: 1;
    transform: translate(0px,0px);
  }
}

@keyframes slideFromLeft{
  from{
    opacity: 0;
    transform: translate(-200px,0px);
  }
  to{
    opacity: 1;
    transform: translate(0px,0px);
  }
}
@keyframes slideFromRight{
  from{
    opacity: 0;
    transform: translate(300px,0px);
  }
  to{
    opacity: 1;
    transform: translate(0px,0px);
  }
}
@keyframes slideFromTop{
  from{
    opacity: 0;
    transform: translate(0px,-200px);
  }
  to{
    opacity: 1;
    transform: translate(0px,0px);
  }
}
@keyframes slideFromBottom{
  from{
    opacity: 0;
    transform: translate(0px,200px);
  }
  to{
    opacity: 1;
    transform: translate(0px,0px);
  }
}
@keyframes roate1{
  from{
    transform: rotate(0deg);
  }
  50%{
    transform: rotate(-20deg);
  }
  to{
    transform: rotate(0deg);
  }
}
@keyframes roate2{
  from{
    transform: rotate(0deg);
  }
  50%{
    transform: rotate(20deg);
  }
  to{
    transform: rotate(0deg);
  }
}
@keyframes roate{
  from{
    transform: rotate(0deg);
  }
  50%{
    transform: rotate(180deg);
  }
  to{
    transform: rotate(360deg);
  }
}
@keyframes circle{
  from{
    transform: translate(0px,0px);
  }
  25%{
    transform: translate(20px,20px);
  }
  50%{
    transform: translate(0px,40px);
  }
  75%{
    transform: translate(-20px,20px);
  }
  100%{
    transform: translate(0px,0px);
  }
}

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

@keyframes blink{
  from{
    opacity: 1;
  }
  50%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

@keyframes move{
  from{
    transform: translate(0px,0px);
  }
  25%{
    transform: translate(-30px,0px);
  }
  50%{
    transform: translate(0px,0px);
  }
  75%{
    transform: translate(30px,0px);
  }
  to{
    transform: translate(0px,0px);
  }
}

@keyframes move2{
  from{
    transform: translate(0px,0px);
  }
  25%{
    transform: translate(-10px,0px);
  }
  50%{
    transform: translate(0px,0px);
  }
  75%{
    transform: translate(10px,0px);
  }
  to{
    transform: translate(0px,0px);
  }
}

@keyframes move3{
  from{
    transform: translate(0px,0px);
  }
  25%{
    transform: translate(10px,0px);
  }
  50%{
    transform: translate(0px,0px);
  }
  75%{
    transform: translate(-10px,0px);
  }
  to{
    transform: translate(0px,0px);
  }
}
@keyframes bounce {
  0%,
  35%,
  62% {
    transform: translateY(0);
  }

  48% {
    transform: translateY(3px);
  }

  52% {
    transform: translateY(4px);
  }
}
.bounce {
  animation: bounce 2.2s infinite ease-in-out;
}