TMS/plg-tms-std-web-vue/public/jq/styles/less/mixin/animate.less

.fade{
  .text{
        h2,p{opacity: 0;}

  }
  &.in{
    .text{
      h2{ animation:opacity 1s 0.7s 1 both,fadeInDown 2s 0.7s 1  ease forwards}
       p{
         animation:opacity 2s 1.7s 1 both}
    }
}
}

.svg-box svg {
  .r-1{
    animation:fadeInUp-data-v-a9281c2e 1.3s 1.8s both
  }
  .r-2{
    animation:fadeIn-data-v-a9281c2e 1s 1.7s both

  }
  .r-3{
    animation:fadeInDown-data-v-a9281c2e 1.3s 1.8s both

  }
  .lines{
    animation:zoomIn-data-v-a9281c2e 1.6s 2s both;
    transform-origin: center;
  }
  .leg{

    animation:fadeIn-data-v-a9281c2e 2s 2.4s both;
    &.leg-1{
    animation-delay: 2.4s;

     }
    &.leg-2{
      animation-delay: 2.5s;

    }
    &.leg-3{
      animation-delay: 2.6s;

    }
    &.leg-4{
      animation-delay: 2.7s;

    }
    &.leg-5{
      animation-delay: 2.8s;

    }

  }


}

@keyframes zoomIn-data-v-a9281c2e {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
    transform: scale(.3)
  }
}
@keyframes fadeInDown-data-v-a9281c2e {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0,-20px,0);
    transform: translate3d(0,-20px,0)
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}
@keyframes fadeInUp-data-v-a9281c2e {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0,20px,0);
    transform: translate3d(0,20px,0)
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}
@keyframes fadeIn-data-v-a9281c2e {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}
@keyframes fadeInDown-data-v-a9281c2e {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0,-20px,0);
    transform: translate3d(0,-20px,0)
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}






.animated {
  animation-duration: 1s;
  animation-fill-mode:forwards;
}

.fadeInDown{
  /*  animation-delay: 0.5s;
    animation-name: fadeInDown;*/
  animation:fadeInDown 1s ease forwards;
}
.flash{
  animation-delay: 0.5s;
  animation-name: flash;
  animation-iteration-count: infinite;
}
@keyframes flash {
  from,50%,to {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0.5;
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    //transform: translate3d(0, -100%, 0);
    transform:translate3d(0, -100%,0);
    visibility: visible;
  }
  to {
    opacity: 1;
    // transform: translate3d(0, 0,0);
    transform:translate3d(0,0,0);
    animation-delay: 0.5s;
  }
}
@keyframes upCode {
  from{
    height: 0;
  }
  100%{
    height: 1.4rem;
  }


}
@keyframes boxBall{
  from,65%{
    transform:translate3d(0,0,0) scale3d(1.1, 1.1, 1.1);
  }
  80%{
    opacity: 1;
  }
  to{
    opacity: 0;
    transform:translate3d(-400%,0,0)  scale3d(0, 0, 0);
  }
}
@keyframes boxBallChild{
  from,65%{

    transform:translate3d(0,0,0)  scale3d(1.1, 1.1, 1.1);
  }
  80%{
    opacity: 1;
  }
  to{
    opacity: 0;
    transform:translate3d(0,2000%,0)  scale3d(0, 0, 0);
  }

}
@keyframes upDown{
  from {
    opacity: 1;
    transform:translate3d(0,0,0);
    visibility: visible;
  }
  50%{
    opacity: 1;
    transform:translate3d(0,-10%,0);

  }
  to {
    opacity: 1;
    transform:translate3d(0,0,0);


  }

}
@keyframes openOutMen{
  from{
    transform:translate3d(0,0,0);

  }
  to{
    transform:translate3d(-0.74rem,0,0);

  }

}

@keyframes openMen{
  from{
    transform:translate3d(0,0,0);

  }
  to{
    transform:translate3d(0.68rem,0,0);

  }

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

    transform:translate3d(-0.25rem,0,0);
  }
  50%{

    transform:translate3d(0,0,0);
  }
  to{

    transform:translate3d(-0.25rem,0,0);
  }

}

@keyframes gradient{
  from{

    transform:rotate3d(0,0,0,0);

    opacity: 1
  }
  50%{
    opacity: 1;
  }
  to{
    opacity: 1;
    transform:rotate3d(0,0,1,365deg);
  }
}


@keyframes rubberBand {

  from,90% {
    transform: scale3d(1, 1, 1);

  }

  93% {

    transform: scale3d(1,1.25, 1);
  }

  94% {

    transform: scale3d(1,0.75, 1);
  }

  95% {

    transform: scale3d(1,1.15, 1);
  }

  96% {

    transform: scale3d(1,0.95, 1);
  }

  97.5% {
    transform: scale3d(1,1.05,  1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {

    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;

    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;

    transform: translate3d(0, -20px, 0);
  }

  75% {

    transform: translate3d(0, 10px, 0);
  }

  90% {

    transform: translate3d(0, -5px, 0);
  }

  to {

    transform: translate3d(0, 0, 0);
  }
}