wave svg css

.footer_waves_wrap {

    .wave_bot {
        animation: carruning 20s infinite linear;
        animation-fill-mode: backwards;
    }

    .wave_mid {
        animation: carruning 20s infinite linear;
        animation-fill-mode: backwards;
    }

    .wave_top {
        animation: carruning 20s infinite linear;
        animation-fill-mode: backwards;
    }

}

@-webkit-keyframes carruning {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}

@keyframes carruning {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}