$trans: all .4s ease-in-out;

@keyframes animation-5 {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(1.1);
    }
  }
  .aniamtion-key-5 {
    position: relative;
    animation-name: animation-5;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    transition: $trans;
  }

  @keyframes animation-7 {
    0% {

      transform:rotate(0) ;
    }

    100% {

      transform: rotate(-1000deg);
    }
}

.keyframe5 {
    position: relative;
    animation-name: animation-7;
    animation-duration: 90s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: cubic-bezier(0.59, 0.59, 1, 1)
}
@keyframes animation-9 {
    0% {

      transform:rotate(0) ;
    }

    100% {

      transform: rotate(-1000deg);
    }
}

.keyframe6 {
    position: relative;
    animation-name: animation-9;
    animation-duration: 30s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: cubic-bezier(0.59, 0.59, 1, 1)
}

@keyframes animation-1 {
    0% {

      transform:translateY(0) ;
    }

    100% {

      transform: translateY(30px);
    }
  }

.aniamtion-key-1 {
    position: relative;
    animation-name: animation-1;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes animation-2 {
    0% {

      transform:translateX(0) ;
    }

    100% {

      transform: translateX(50px);
    }
  }

  .aniamtion-key-2 {
    position: relative;
    animation-name: animation-2;
    animation-duration: 2.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@keyframes animation-3 {
    0% {

      transform:translateY(0) ;
    }

    100% {

      transform: translateY(60px);
    }
  }

  .aniamtion-key-3 {
    position: relative;
    animation-name: animation-3;
    animation-duration: 1.3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes animation-4 {
    0% {

      transform:translateY(0) ;
    }

    100% {

      transform: translateY(40px);
    }
  }

  .aniamtion-key-4 {
    position: relative;
    animation-name: animation-4;
    animation-duration: 1.6s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@keyframes animation-6 {
    0% {

      transform:translateY(0) ;
    }

    100% {

      transform: translateY(50px);
    }
  }

  .aniamtion-key-6 {
    position: relative;
    animation-name: animation-6;
    animation-duration: 1.9s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@keyframes animation-8 {
    0% {

      padding-left: 0px;
    }

    100% {

      padding-left: 50px;
    }
  }

  .aniamtion-key-7 {
    position: relative;
    animation-name: animation-8;
    animation-duration: 1.3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@-webkit-keyframes fade-in-down {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -50px, 0);
        transform: translate3d(0, -50px, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
  }

  @keyframes fade-in-down {
    0% {
        -webkit-transform: translate3d(0, -50px, 0);
        transform: translate3d(0, -50px, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
  }

  @keyframes pulse-border {
    0% {
      transform: translateX(0) translateY(0) translateZ(0) scale(1);
      opacity: 1;
    }
    100% {
      transform: translateX(0) translateY(0) translateZ(0) scale(1.5);
      opacity: 1;
    }
  }
  .pulse-border {
    position: relative;
    animation-name: pulse-border;
    animation-duration: 1500ms;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes pulse-border1 {
    0% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
        opacity: 0;
    }
  }
  .pulse-border1 {
    position: relative;
    animation-name: pulse-border1;
    animation-duration: 1500ms;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

//   margquee animation //
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translatex(-100%); }
}
@keyframes marquee-2 {
    0% { transform: translateX(-100%); }
    100% { transform: translatex(0); }
}